CODEWITHSUNDEEP
jquerytwitter-bootstrap
dihakz
dihakz

Reputation: 557

Toggle Nav Tab in Bootstrap

I have a working Bootstrap implementation of nav tabs, where there are no active tabs upon loading the page. I would like, however, to make the function of each tab work as a toggle, so that if a tab is "active" it would lose that class and default to the original state of the page.

Here is my HTML:

    <div class="well nav-base">
    <div class="pull-right"><a href="#">collapse all tabs</a></div>
    <ul class="nav nav-tabs" id="testtab">
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li class="dropdown">
            <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
                <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
            </ul>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade" id="home">
            <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </div>
        <div class="tab-pane fade" id="profile">
            <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
        </div>
        <div class="tab-pane fade" id="dropdown1">
            <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
        </div>
        <div class="tab-pane fade" id="dropdown2">
            <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
        </div>
    </div>
</div><!--/.well -->

Here is the jQuery:

$(function(){
    $("li.active a").click(function(){

        var $parent = $(this).parent();
        if (!$parent.hasClass("active")){
            $parent.addClass("active");
            event.stopImmediatePropagation();
        }
    });
});

I've searched near and far, through the depths of Google, to Bootstrap's own site, to this very board, with no adequate results. Any help is appreciated.

Upvotes: 0

Views: 3419

Answers (1)

Serlite
Serlite

Reputation: 12258

I changed up your JavaScript a bunch. Basically, you'll want to do two things: remove the .active class from the tab button, and also find the corresponding tab content and hide that as well. Here's what I came up with:

$(function(){
    $(document).on("click", "li.active > a", function(){
        var $parent = $(this).parent();

        // Ensure link isn't just a dropdown menu link     
        if (!$parent.hasClass("dropdown")){
            // Deactivate tab buttons
            $("#testtab li").removeClass("active");

            // Hides tab contents
            tabName = $(this).attr("href");
            $(tabName).removeClass("active").addClass("fade");
        }
    });
});

I changed around how callback functions are assigned, by using the on() function - using click() won't take into account any <li> elements that get the .active class applied to them later, just the ones that presently have that class.

Also, having a dropdown in your menu makes it necessary to ensure the link being clicked isn't just the dropdown menu link, and is actually a menu item. Rather than removing the .active class from only a single <li>, I found it necessary to remove it from every item in your navigation menu, to ensure both the dropdown and its menu items were deactivated.

Here's a JSFiddle to demonstrate the code in action. Hope this helps! Let me know if you have any questions.

Upvotes: 1

Related Questions