New Community Forums are coming. Watch this space for news.
Subscribe: RSS
  • 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