CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Mugiwara
Mugiwara

Reputation: 896

Bootstrap nav-tabs 'show' doesn't work?

I am trying to add a search box in my glossary but something is not right. The glossary is made by ul inside ul (nav-tabs of bootstrap)`, in the js I am using the following code:

$j('#search_glossary').focus().keyup(function(e){
if (this.value.length >= 2){

$j('.nav-tabs li.active').removeClass('active');
        $j('.tab-content div.active').removeClass('active');
        var filterBy = this.value.toUpperCase();
        for (var abbr in UlTab) {
if (abbr.toUpperCase().indexOf(filterBy) !== - 1) {
var li = abbr;
        var ulTabli = UlTab[abbr];
        var globalUl;
        if (/tv/.test(ulTabli)) globalUl = "tv";
        if (/video/.test(ulTabli)) globalUl = "video";
        if (/audio/.test(ulTabli)) globalUl = "audio";
        $j('ul#' + ulTabli + ' li a').show();
        $j('ul#' + ulTabli + ' li a:eq(' + li + ')').show();
        $j('#' + ulTabli + ' a[href="#' + li + '"]').tab('show');
        $j('#glossaryTab a[href="#' + globalUl + '"]').tab('show');
        break;
}

$j('.nav-tabs li.active').removeClass('active');
        $j('.tab-content div.active').removeClass('active');
}
});

The HTML is in the following structure :

<ul id="glossaryTab" class="nav nav-tabs nav-justified">
    <li><a href="#video" data-toggle="tab">video</a></li>
    <li><a href="#audio" data-toggle="tab">audio</a></li>
    <li><a href="#tv" data-toggle="tab">tv</a></li>
</ul>
<div id="glossary_content" class="tab-content">
    <div class="tab-pane fade" id="video">
        <ul id="videoTab" class="nav nav-pills">
            <li>...</li>
            <li>...</li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane glossary" id="...">...</div>
            ....
        </div>

I have two problems:

  1. Sometimes the search doesn't display anything and when I check with the debug console when I type $j('#audioTab a[href="#MP3"]').tab('show'), I get [<a href=​"#MP3" data-toggle=​"tab" style=​"display:​ block;​">​MP3​</a>​] and I noticed that it only displays the div when style is not set.

  2. When I search for something with empty space or has '/' $j('ul#'+ulTabli+' li a:eq('+li+')').show(); doesnt work.

EDIT : DEMO

Upvotes: 5

Views: 4640

Answers (1)

Mugiwara
Mugiwara

Reputation: 896

Apparently i forgot to remove the active li in the second ul (the one inside the the big one)

$('.tab-pane ul li.active').removeClass('active');

Upvotes: 4

Related Questions