<ul class="principaly">
<li class='active'>Text</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
</ul>
<ul class="dropdown_1">
<li>Text1ForDropdown_1</li>
<li class='active'>Text2ForDropdown_1</li>
<li>Text3ForDropdown_1</li>
<li>Text4ForDropdown_1</li>
</ul>
<ul class="dropdown_2">
<li>Text1ForDropdown2</li>
<li>Text2ForDropdown2</li>
<li class='active'>Text3ForDropdown2</li>
<li>Text4ForDropdown2</li>
</ul>
<ul class="dropdown_3">
<li>Text1ForDropdown3</li>
<li class='active'>Text2ForDropdown3</li>
<li>Text3ForDropdown3</li>
<li>Text4ForDropdown3</li>
</ul>
Есть 4 менюшки. в ней li. Как можно заметить только у одного элемента есть класс active. Он выдается при клике на элемент и для каждой менюшки имеется только 1 li с классом active. Вот в чем суть. Изначально только первое меню открыто. Человек нажал на один элемент, li выдает класс active и актрывается вторая, потом на вторую выбрал и открывается 3.
Вот примерная реализация на одном сайте. Подскажите пожалуйста как мне такое сделать? с моей структурой. Все ul находятся на одном уровне