Есть меню такого плана:
<ul>
<li><a href="#">Пункт меню</a>
<ul>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
</ul>
</li>
<li><a href="#">Пункт меню</a>
<ul>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
</ul>
</li>
<li><a href="#">Пункт меню</a>
<ul>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
</ul>
</li>
</ul>
Все родительские пункты изначально свернуты. При клике на один из главных пунктов меню открывается его подменю. При клике на другой главный пункт меню - так же открывается его подменю, а подменю первого пункта закрывается. При обновлении страницы все остается на своих местах, т.е. информация записывается в куки какой пункт меню был активным до перезагрузки страницы.
Что нужно дописать чтобы изначально был открыт первый пункт меню, а остальные закрыты. И дальше все работало как по умолчанию.
Здесь все файлы (index.html и 2шт. js) https://db.tt/tqB6WMMT