Hello everybody,
I want to create a website with vertical navigation using Bootstrap 4 and Modx. Two of the menu items still have sub-items. For this I have created the following chunks:
parentRow
<li>
<a class="nav-link collapsed" data-toggle="collapse" data-target="#submenu" href="[[+wf.link]]">[[+wf.linktext]]<span class="arrow"></span></a>[[+wf.description]]
[[+wf.wrapper]]
</li>
innerTpl
<ul class="sub-menu collapse" id="submenu" aria-expanded="false"[[+wf.classes]]>
[[+wf.wrapper]]
</ul>
My problem is that all submenus open when I click one. Because they have all the same ID:
data-target="#submenu"
id="submenu"
I thought of the following solution
data-target="#[[+wf.linktext]]"
but that didn't work with the id=“ submenu“.
The navigation looks like this:
<li>
<a class="nav-link collapsed" data-toggle="collapse" data-target="
#submenu" href="index.php?id=3">Test<span class="arrow"></span></a>
<ul class="sub-menu collapse" id="
submenu" aria-expanded="false">
<li><a href="index.php?id=12">Test 1</a></li>
<li><a href="index.php?id=13">Test 2</a></li>
</ul>
</li>
<li>
<a class="nav-link collapsed" data-toggle="collapse" data-target="
#submenu" href="index.php?id=7">Test 3<span class="arrow"></span></a>
<ul class="sub-menu collapse" id="
submenu" aria-expanded="false">
<li><a href="index.php?id=14">Test 4</a></li>
<li><a href="index.php?id=18">Test 5</a></li>
</ul>
</li>
Have someone a solution?
Best regards,
Michael
