Th3Vampir3 Th3Vampir3 - 4 months ago 5
HTML Question

Twitter Bootstrap tabs not hiding content

I have a little problem with my code. The tabs load but when I click on another inactive tab doesn't hide the content of the first tab and displays the content of both tabs. Is there anything I can do? Thank you very much!

<ul style="list-style:none"class="available-tabs nav nav-tabs" id="tabs" data-tabs="tabs">
<li class="active"> <a data-toggle="tab" href="#featured-tab-body">FEATURED PROJECTS</a></li>
<li> <a data-toggle="tab" href="#available-latest-tab">LATEST PROJECTS </a> </li>
</ul>
<div class="available-content tab-content container">
<div id="available-featured-tab">
<div class="featured-list-wrapper">
<div class="row">
<div class="col-md-12">
<div class="featured-list-content">
<div class="row featured-tab-head" style="color:black;height:40px">
<div class="col-md-5 col-sm-5 col-xs-8">
<h5> YAE</h5>
</div>
<div class="col-md-2 col-sm-2 hidden-xs">
<h5>NAH</h5>
</div>
<div class="col-md-2 hidden-sm hidden-xs">
<h5>HEY</h5>
</div>
<div class="col-md-1 col-sm-2 hidden-xs">
<h5>YOU</h5>
</div>
</div>
<div class="featured-tab-body tab-pane fade in active">
sup
</div>
</div>
</div>
</div>
</div>
<div id="available-latest-tab" class="tab-pane fade">
hi
</div>
</div>

Answer

You need to put all the div contents under the same root div. So istead of:

<div class="available-content tab-content container">
    <div id="available-featured-tab">
        <div class="featured-list-wrapper">
            <div class="row">
                <div class="col-md-12">
                    <div class="featured-list-content">
                        <div class="featured-tab-body tab-pane fade in active">
                            sup
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="available-latest-tab" class="tab-pane fade">
        hi
    </div>
</div>

You need:

<div class="available-content tab-content container">
    <div id="available-featured-tab">
        <div class="featured-list-wrapper">
            <div class="row">
                <div class="col-md-12">
                    <div class="featured-list-content">
                        <div class="featured-tab-body tab-pane fade in active">
                            sup
                        </div>
                        <div id="available-latest-tab" class="tab-pane fade">
                            hi
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

No need for the Jquery, since bootstrap do the work for you. Corrected fiddle: http://jsfiddle.net/xFW8t/1777/

Comments