Добрый день. У меня на странице имеется древовидный HTML список
<ul>
<li><a href="coffee">Coffee</a></li>
<li><a href="tea">Tea</a>
<ul>
<li><a href="black-tea">Black tea</a>
<ul>
<li><a href="warn-tea" class="active">Warm tea</a></li>
</ul>
</li>
<li><a href="green-tea">Green tea</a></li>
<li><a href="yellow-tea">Yellow tea</a></li>
</ul>
</li>
<li><a href="milk">Milk</a></li>
</ul>
Хочу сделать так чтобы, изначально он был схлопнутый, т.е.
Но слева от каждого пункта была иконка, обозначающая что есть дочерние элементы, кликая по которой, пункт разворачивался, и появлялись дочерние, например таковым будет пункт Tea, кликнув слева от него по иконки появились бы Black, green, yellow tea
Но при этом сам пункт Tea это ссылка, если кликнуть по нему, то страница перезагрузится и ему добавится класс active, в данном случае он должен сам быть уже распахнутым, и такое поведение должно быть на любом уровне иерархии, т.е. все родительские элементы начиная от active должны быть автоматом распахнутыми. Но при этом с помощью иконок слева, должны быть возможность их схлапывания
Другими словами какая есть может готовая библиотека, которая я бы подсунул class меню, либо некий идентификатор корня меню, после чего она бы сделала все данные изменения. Либо это можно решить лишь с помощью CSS
Важен факт возможности распахивать и сворачивать кликая слева от ссылки по чему нибудь, и если я отдельно по ссылке перейду в какой нибудь дочерний элемент то все его родительские элементы автоматически распахнутся (до самого начала) и если есть дочерние элементы у элемента на который я перёшёл, то они тоже распахнутся на один уровень так сказать
Простой
