Question

I’m using bootstrap to display content below tabs, but I want to collapse the tabs when the tab is clicked again. Here is the code I tried to get to work, to no avail:

    <ul id="myTab" class="nav nav-tabs">
        <li class="square"><a class="story" href="#article1" data-toggle="tab"><img src="#"/></a></li>
        <li class="square"><a class="story" href="#article2" data-toggle="tab"><img src="#g"/></a></li>
        <li class="square"><a class="story" href="#article3" data-toggle="tab"><img src="#"/></a></li>
               <div id="article1" class="tab-pane fade"><p>Lorem ipsum...</p></div>
               <div id="article2" class="tab-pane fade"><p>Lorem ipsum dolor sit amet....</p</div>
               <div id="article3" class="tab-pane fade"><p>Lorem ipsum dolor sit amet...</p></div>
    </ul>

<script>
$('#myTab a').click(function (e) {
            if($(this).tab.hasClass('active')){
                    $(this).tab('hide');
                } else {
                        e.preventDefault();
                        $(this).tab('show');
                    }
                })
</script>

I’m not sure if tabs are supposed to work this way…should I try the collapse functionality?

Answer 1

Yes, it sounds like you want Bootstrap’s collapse widget. That said, this jQuery will hide an already active tab:

$('#myTab a').click(function (e) {
    if($(this).parent('li').hasClass('active')){
        $( $(this).attr('href') ).hide();
    }
});​

The problem is that this prevents a hidden tab from being shown again, so I don’t think you’ll want to use it. See http://jsfiddle.net/jhfrench/NQ97h/

If you want to be able to bring the tab back, try:

$('#myTab a').click(function (e) {
    if($(this).parent('li').hasClass('active')){
        var target_pane=$(this).attr('href');
        $( target_pane ).toggle( !$( target_pane ).is(":visible") );
    }
});

See http://jsfiddle.net/epT3L/ for this solution.