VAS

Доброго дня!
Взял за образец сайдменю — www.codeply.com/p/WGCqYEiPBg
хочу сделать чтобы разворачивались подпункты меню по типу аккордеон. Пытаюсь сделать на wayfinder.
Вызов в шаблоне:

[[Wayfinder?
&startId=`0`
&level=`2`
&outerTpl=`Wayfinder.Sidebar.outerTpl`
&innerTpl=`Wayfinder.Sidebar.innerTpl`
 &innerRowTpl=`Wayfinder.Sidebar.innerRowTpl`
&rowTpl=`Wayfinder.Sidebar.rowTpl`
&parentRowTpl=`Wayfinder.Sidebar.parentRowTpl`
]]

Wayfinder.Sidebar.parentRowTpl:

<!-- parentRowTpl-->
<li class="[[+wf.classnames]]">
    <a class="nav-link px-0 align-middle" href="#submenu1" data-bs-toggle="collapse" title="[[+wf.title]]">
        <span class="ms-1 d-none d-sm-inline">[[+wf.linktext]]</span>
    </a>
    [[+wf.wrapper]]
</li><!-- /parentRowTpl -->

— здесь в href="#submenu1" должно быть # с ссылкой на id ul вложенного элемента
Wayfinder.Sidebar.innerTpl:

<!-- innerTpl -->
<ul id="submenu1" class="collapse nav flex-column ms-1" data-bs-parent="#menu">
    [[+wf.wrapper]]
</ul><!-- /innerTpl -->

-здесь надо чтобы id ul совпадало с href вышестоящей ссылки, чтобы ul раскрывался при нажатии на соответствующую ссылку.
Прошу подсказать как это можно реализовать?