Bootstrap 5 Navbar Collapse function Inside Dropdown function (Mobile) not working

Question

This question is for Bootstrap 5. I've created a navbar that allows you to click on the first link (Open First Level) to open the dropdown and inside it, I have another collapse function (Open Second Level) which supposed to allow the user to click to open another set of links.

The issue I'm having is that when I try to click on the Open Second Level link, the navbar actually closes rather than remain open and show the Open Second Level sub links.

How can I open the second collapse link without the first one closes?

You can refer to the scripts here:-

        <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Nav Logo</a>
            <button class="navbar-toggler hamburger hamburger--spring" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <div class="hamburger-box">
                    <div class="hamburger-inner"></div>
                </div>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto align-self-center">

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Open First Level
                        </a>
                        <div class="dropdown-menu w-100 shadow" aria-labelledby="navbarDropdown">
                            <div class="d-lg-flex p-4 p-lg-0">
                                <div class="flex-grow-1 nav-sku-container">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="nav-sku-block">
                                                <div class="title-sm">
                                                    <a class="" data-bs-toggle="collapse" href="#collapseToilet" role="button" aria-expanded="false" aria-controls="collapseToilet">
                                                        Open Second Level
                                                    </a>
                                                </div>
                                                <div class="collapse open-d" id="collapseToilet">
                                                    <ul>
                                                        <li><a href="">Coupled</a></li>
                                                        <li><a href=""> Coupled</a></li>
                                                        <li><a href=""> Coupled</a></li>
                                                        <li class="viewall"><a href="">View All</a></li>
                                                    </ul>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

https://jsfiddle.net/0tnrfj6q/1/

Thanks for all your help in advance!

question from:https://stackoverflow.com/questions/66049433/bootstrap-5-navbar-collapse-function-inside-dropdown-function-mobile-not-worki

Answer 1

Waitting for answers