Amelie Amelie - 4 months ago 56
jQuery Question

Close all Bootstrap Tabs, until I hover one

I'm trying to have all tabs closed when I arrive on the page. Then, they should be activated on hover. Here's what I've done so far. I think I've done the hover part well, but I can't find how to close my tabs by default. Apparently removing the .active in HTML doesn't work.

<!-- TABS -->
<div class="col-xs-3 hidden-xs">
<div class="row">
<nav class="side-nav">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="full-width active">
<a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">TAB1</a>
</li>
<li role="presentation" class="full-width">
<a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">TAB2</a>
</li>
</ul>
</nav>
</div>
</div>

<!-- TAB CONTENT -->
<div class="tab-content col-xs-9">
<div role="tabpanel" class="tab-pane row active" id="tab1">
<div class="col-xs-4">
TAB CONTENT 1
</div>
</div>
<div role="tabpanel" class="tab-pane row active" id="tab2">
<div class="col-xs-4">
TAB CONTENT 2
</div>
</div>
</div>


This is my script

$('.nav-tabs > li > a').hover(function() {
$(this).tab('show');
});

Answer

I think you just have to remove the active class on your tab contents as you said.

Bootply : http://www.bootply.com/bXCz8Y7ZOh

HTML :

<!-- TAB CONTENT -->
<div class="tab-content col-xs-9">
    <div role="tabpanel" class="tab-pane row" id="tab1">
        <div class="col-xs-4">
            TAB CONTENT 1
        </div>
    </div>
    <div role="tabpanel" class="tab-pane row" id="tab2">
        <div class="col-xs-4">
            TAB CONTENT 2
        </div>
    </div>
</div>

Update with extanded javascripts: Over and Leave Toggle...

I think there should have better solutions than this one but it's working...

JS:

$('.nav-tabs > li > a').on('mouseover', function() {
    $(this).tab('show');
});
$('.nav-tabs > li > a').on('mouseleave', function() {
    // remove active class on the tab panel
    $($(this).attr('href')).removeClass('active');
    // remove active class on the tab tab
    $(this).parent().removeClass('active');
});

Bootply: http://www.bootply.com/vTXnT8VckW

Comments