Как отображать различные блоки в зависимости от выбора пользователя?

Question

[KakNaZlo]

Есть много строчек html кода:

<div class="one">
<div class="one_1"></div>
 <div class="one_2"></div>
</div>
<div class="two">
<div class="two_1"> </div>
<div class="two_2"> </div>
 </div>
<div class="three"> 
<div class="three_1"> </div>
<div class="three_2"> </div>
</div>
<div class="four">
<div class="four_1"> </div>
<div class="four_2"> </div>
 </div>

Хочу реализовать выпадающее меню, где будут указаны варианты выбора блока "one...four", и в зависимости от выбора показывается информация находящаяся, в этом конкретном блоке.
В какую сторону копать, что почитать по теме? Я так понимаю, что нужно соорудить возможность выборки по идентификатору? Если выбрана категория "one" - выводят результаты такие-то, если "two" другие?

Comments

[tyzberd]

пробуйте использовать плагин https://isotope.metafizzy.co/

[KakNaZlo]

Сторонние плагины использовать не могу, но спасибо, вещь интересная, буду учитывать на будующее)

Answer 1

[alexalexes]

Измените структуру документа:

<div class="info_block one">
<div class="one_1"></div>
 <div class="one_2"></div>
</div>
<div class="info_block two">
<div class="two_1"> </div>
<div class="two_2"> </div>
 </div>
<div class="info_block three"> 
<div class="three_1"> </div>
<div class="three_2"> </div>
</div>
<div class="info_block four">
<div class="four_1"> </div>
<div class="four_2"> </div>
 </div>

Определите стили для инф. блоков.
По умолчанию, все инф. блоки скрыты, нескрытым может быть блок, имеющий в себе класс active:

<style>
div.info_block
{
  display: none;
}
div.info_block.active
{
  display: block;
}
</style>

Подключаете JQuery:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Определяете функцию, которая будет устанавливать убирать и устанавливать класс active на инф. блоках.

<script>
function display_div(class_name)
{
  $('div.info_block').removeClass('active');
  $('div.info_block.' + class_name).addClass('active');
}
</script>

Делаете видимым первый блок:

<script>
display_div('one');
</script>

Вставляете в пункты меню обработчик onclick для вызова функции отображения текущего инф. блока:

<ul>
  <li onclick="display_div('one')">Первый блок</li>
  <li onclick="display_div('two')">Второй блок</li>
  <li onclick="display_div('three')">Третий блок</li>
  <li onclick="display_div('four')">Четвертый блок</li>
</ul>

Comments

[KakNaZlo]

Спасибо! На выходных попробую)