Показать скрытый контент на основе нажатия кнопки

Question

Как показать / скрыть контент на основе нажатия кнопки?

Я могу добиться этого, как показано ниже, но мой код очень длинный, и я уверен, что есть гораздо лучший / более короткий способ сделать это.

HTML

<p class="option2-top">option two</p>
<p class="option3-top">option three</p>

<button id="option-one">one</button>
<button id="option-two">two</button>
<button id="option-three">three</button>

<p class="option1-below">option one</p>
<p class="option2-below">option two</p>
<p class="option3-below">option three</p>

Javascript

var oneTop = document.querySelector(".option1-top");
var twoTop = document.querySelector(".option2-top");
var threeTop = document.querySelector(".option3-top");

var oneBelow = document.querySelector(".option1-below");
var twoBelow = document.querySelector(".option2-below");
var threeBelow = document.querySelector(".option3-below");

oneTop.style.display = "block";
twoTop.style.display = "none";
threeTop.style.display = "none";

oneBelow.style.display = "block";
twoBelow.style.display = "none";
threeBelow.style.display = "none";

document.getElementById("option-one").onclick = function () {
oneTop.style.display = "block";
twoTop.style.display = "none";
threeTop.style.display = "none";

oneBelow.style.display = "block";
twoBelow.style.display = "none";
threeBelow.style.display = "none";
};

document.getElementById("option-two").onclick = function () {
oneTop.style.display = "none";
twoTop.style.display = "block";
threeTop.style.display = "none";

oneBelow.style.display = "none";
twoBelow.style.display = "block";
threeBelow.style.display = "none";
};

document.getElementById("option-three").onclick = function () {
oneTop.style.display = "none";
twoTop.style.display = "none";
threeTop.style.display = "block";

oneBelow.style.display = "none";
twoBelow.style.display = "none";
threeBelow.style.display = "block";
};

Вот рабочий JSfiddle

Не знаю не возражаю против jQuery решения!

Answer 1

Спасибо всем за отличные решения!

В итоге я использовал решение @Neeraj Amoli и усовершенствовал его следующим образом:

  <div class="upper-timeline">
   <p class="option-one" style="opacity: 0;">option one</p>
   <p class="option-two" style="opacity: 0;">option two</p>
   <p class="option-three" style="opacity: 0;">option three</p>
   <p class="option-four" style="opacity: 0;">option four</p>
  </div>
  <div class="buttons">
    <button id="option-one">one</button>
    <button id="option-two">two</button>
    <button id="option-three">three</button>
    <button id="option-four">four</button>
  </div>
  <div class="lower-timeline">
   <p class="option-one" style="opacity: 0;">option one</p>
   <p class="option-two" style="opacity: 0;">option two</p>
   <p class="option-three" style="opacity: 0;">option three</p>
   <p class="option-four" style="opacity: 0;">option four</p>
  </div>

    $(document).ready(function(){
     $("p").addClass("remove");
     $(".option-one").addClass("show");
     $("button").hover(function(){
       $("p").removeClass("show").addClass("remove");
       class_nmae = $(this).attr('id');
       $("."+class_nmae).removeClass("remove").addClass("show");
     });
   }); 

jsfiddle

Answer 2

Имеют общий класс / селектор для всех опций, чтобы скрыть все опции.

Имеют опции, определяющие c классы, которые затем отображаются по запросу.

имеют общий класс / селектор на кнопках чтобы добавить прослушиватели событий (нажмите в этом случае).

Таким образом, независимо от того, сколько опций вы добавляете, они все равно работают.

var buttons = document.querySelectorAll('.toggle-btn');
buttons.forEach(function(btn) {
  btn.addEventListener('click', function(evt) {
    var button = evt.target;
    var btnOption = button.getAttribute('data-target');
    hideAllOptions();
    showOption(btnOption);
  });
});

function hideAllOptions() {
  document.querySelectorAll('.options').forEach(function(option) {
    option.style.display = 'none';
  });
}

function showOption(target) {
  document.querySelectorAll(target).forEach(function(option) {
    option.style.display = 'block';
  })
}

// Show first option on load
buttons[0].click();

<p class="options option1">option one</p>
<p class="options option2">option two</p>
<p class="options option3">option three</p>
<p class="options option4">option four</p>

<button class="toggle-btn" data-target=".option1">one</button>
<button class="toggle-btn" data-target=".option2">two</button>
<button class="toggle-btn" data-target=".option3">three</button>
<button class="toggle-btn" data-target=".option4">four</button>

<p class="options option1">option one</p>
<p class="options option2">option two</p>
<p class="options option3">option three</p>
<p class="options option4">option four</p>

Answer 3

Возможное решение ванили JavaScript, которое не требует от вас изменения html:

let topTexts = document.querySelectorAll('p[class$="top"');
let bottomTexts = document.querySelectorAll('p[class$="below"');
let buttons = document.querySelectorAll("button");

for(let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = () => {
    Array.from(topTexts).map((e, j) => (e.hidden = i !== j));
    Array.from(bottomTexts).map((e, j) => (e.hidden = i !== j));
  };
}

buttons[0].click();

<p class="option1-top">option one</p>
<p class="option2-top">option two</p>
<p class="option3-top">option three</p>

<button id="option-one">one</button>
<button id="option-two">two</button>
<button id="option-three">three</button>

<p class="option1-below">option one</p>
<p class="option2-below">option two</p>
<p class="option3-below">option three</p>

Answer 4

    $(document).ready(function(){
     $(".opt").hide();
     $("button").click(function(){
       $("p").hide();
       class_nmae = $(this).attr('id');
       $("."+class_nmae).show();
     });
   }); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="option-one">option one</p>
    <p class="option-two opt">option two</p>
    <p class="option-three opt">option three</p>
    <p class="option-four opt">option four</p>

    <button id="option-one">one</button>
    <button id="option-two">two</button>
    <button id="option-three">three</button>
    <button id="option-four">four</button>

    <p class="option-one">option one</p>
    <p class="option-two opt">option two</p>
    <p class="option-three opt">option three</p>
    <p class="option-four opt">option four</p>

 you can use like this
    <p class="option-one">option one</p>
    <p class="option-two opt">option two</p>
    <p class="option-three opt">option three</p>
    <p class="option-four opt">option four</p>

    <button id="option-one">one</button>
    <button id="option-two">two</button>
    <button id="option-three">three</button>
    <button id="option-four">four</button>

    <p class="option-one">option one</p>
    <p class="option-two opt">option two</p>
    <p class="option-three opt">option three</p>
    <p class="option-four opt">option four</p>

    $(document).ready(function(){
     $(".opt").hide();
     $("button").click(function(){
       $("p").hide();
       class_nmae = $(this).attr('id');
       $("."+class_nmae).show();
     });
   });