Есть на странице несколько тегов . Их можно описать в css как li ul.children Нужно сделать спойлеры перед ними. Есть мысль реализовать задумку следующим образом.
Из этого:
<ul>
<li class="cat-item cat-item-26"><a href="26">Title</a> (9) </li>
<ul class="children">
<li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
<li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
<li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
</ul>
<li class="cat-item cat-item-36"><a href="36">Title</a> (9) </li>
<ul class="children">
<li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
<li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
<li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
</ul>
</ul>
Нужно сделать что то типа такого:
<ul>
<li class="cat-item cat-item-26"><a href="26">Title</a> (9) </li>
<div class="toogle-children-1"></div>
<ul class="children-1">
<li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
<li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
<li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
</ul>
<li class="cat-item cat-item-36"><a href="36">Title</a> (9) </li>
<div class="toogle-children-2"></div>
<ul class="children-2">
<li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
<li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
<li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
</ul>
</ul>
Перед каждым из них добавить div (он будет таким себе переключателем).
При нажатии на который в ul добавим высоту , а при повторном нажатии на этот же div наш ul снова станет
А теперь главный вопрос: как такое сделать на js или jquery? ))) Причем для нескольких на одной и той же странице.