CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcssbootstrap-4
Elhaw
Elhaw

Reputation: 325

Bootstrap 4 Tabs inside drop-down menu

I am using boostrap 4 drop down menu with tabs inside. Here is the codepin I found this link useful to stop click event propagation so that the drop down menu does not close on click inside itAvoid dropdown menu close on click inside

But clicking on tabs does not work. code pin:boostrap 4 tabs inside drop down menu

is there any solution or another approach so that tabs work inside drop down menu

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
     Navbar
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
</button>
<div id="navbarNavDropdown" class="collapse navbar-collapse">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">
                 Home
                <span class="sr-only">
                     (current)
                </span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                 Features
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                 Pricing
            </a>
        </li>
        <li class="nav-item dropdown">
            <a id="navbarDropdownMenuLink" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <div class="container">
                    <ul id="tabs" class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a id="tab-A" class="nav-link active" role="tab" href="#pane-A" data-toggle="tab">
                                 &ndash;A&ndash;
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="tab-B" class="nav-link" role="tab" href="#pane-B" data-toggle="tab">
                                 &ndash;B&ndash;
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="tab-C" class="nav-link" role="tab" href="#pane-C" data-toggle="tab">
                                 &ndash;C&ndash;
                            </a>
                        </li>
                    </ul>
                    <div id="content" class="tab-content" role="tablist">
                        <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
                            <div id="heading-A" class="card-header" role="tab">
                                <h5 class="mb-0">
                                    <a href="#collapse-A" data-toggle="collapse" data-parent="#content" aria-expanded="true" aria-controls="collapse-A">
                                         Collapsible Group Item A
                                    </a>
                                </h5>
                            </div>
                            <div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
                                <div class="card-body">
                                    [Tab content A]
                                </div>
                            </div>
                        </div>
                        <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
                            <div id="heading-B" class="card-header" role="tab">
                                <h5 class="mb-0">
                                    <a class="collapsed" href="#collapse-B" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-B">
                                         Collapsible Group Item B
                                    </a>
                                </h5>
                            </div>
                            <div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
                                <div class="card-body">
                                    [Tab content B]
                                </div>
                            </div>
                        </div>
                        <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
                            <div id="heading-C" class="card-header" role="tab">
                                <h5 class="mb-0">
                                    <a class="collapsed" href="#collapse-C" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-C">
                                         Collapsible Group Item C
                                    </a>
                                </h5>
                            </div>
                            <div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
                                <div class="card-body">
                                    [Tab content C]
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

JS

$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });

Is there possible solution ?

Upvotes: 1

Views: 5624

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

The simplest way is to wrap it inside a form since the form will prevent the Dropdown from closing on click...

<nav>
    ...
    <li class="nav-item dropdown">
             <form>
                 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
                      Dropdown link
                 </a>
                 <div class="dropdown-menu">
                     ....
                 </div>
            </form>
    </li>
    ...
</nav>

https://www.codeply.com/go/GzekeuWnSg

The other method is using jQuery to like this:

$('.dropdown-menu .nav-tabs .nav-link').on("click.bs.dropdown", function (e) { 
    $(this).tab('show'); 
    e.stopPropagation(); 
});

https://www.codeply.com/go/iEDxVGTzAZ

Upvotes: 5

Related Questions