Всем привет, извините за тупость, не кидайте пожалуйста камнями в меня, я прошу вашего внимания и помощи, но в интернете есть много чего, но того что именно мне надо нету( или есть но не полностью то что мне надо.
В общем есть такая структура меню
<ul class="tree " id="menu">
<li class="sub">
<a href="# title="">
Меню
</a>
<ul>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
</ul>
</li>
<li class="sub">
<a href="# title="">
Меню
</a>
<ul>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
</ul>
</li>
<li class="sub">
<a href="#" title="">
Меню
</a>
<ul>
<li class="sub">
<a href="#" title="">
Меню
</a>
<ul>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
</ul>
</li>
<li class="sub">
<a href="#" title="">
Меню
</a>
<ul>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
<li class="sub">
<a href="#" title="">
Меню
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Оно 3х уровненное. Могут быть одиночные пункты, могут быть 2х уровненные, могут быть и трех уровненное вложение.
В общем прошу помочь мне, сделать аккордеон меню, первый пункт должен быть открытым при первом заходе, после что бы при клике на иконку, открывались под категории и куками или кешем запоминалось выбранный пункт, и после перезагрузки страницы что бы этот пункт был открыт.
Еще момент, главное что бы открытие было не по нажатию кнопки первого уровня, а что бы рядом была какая то иконка или "+" - вот как пример вам покажу.
