1

Here is my code 

<!-- Nav tabs -->
            <div class="container">
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class=""><a href="#tab1" role="tab" data-toggle="tab">Tab1</a></li>
  <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Tab2</a></li>
  <li role="presentation"><a href="#tab3" role="tab" data-toggle="tab">Tab3</a></li>
  <li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">Tab4</a></li>
</ul>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade" id="tab1">Texts</div>
  <div role="tabpanel" class="tab-pane fade" id="tab2">Some text</div>
  <div role="tabpanel" class="tab-pane fade" id="tab3">Just fill this pace</div>
  <div role="tabpanel" class="tab-pane fade" id="tab4">Some more texts</div>
</div>

Fade is not working as I removed active ( I do not wish to any tab to be active on load so) how can I make fade in effect without using active.

Ganesh H
  • 1,649
  • 3
  • 14
  • 20

1 Answers1

3

Remove the active from the nav but not on the tab-content .... To keep the content closed remove the class in:

<!-- Nav tabs -->
            <div class="container">
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class=""><a href="#tab1" role="tab" data-toggle="tab">Tab1</a></li>
  <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Tab2</a></li>
  <li role="presentation"><a href="#tab3" role="tab" data-toggle="tab">Tab3</a></li>
  <li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">Tab4</a></li>
</ul>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade active" id="tab1">Texts</div>
  <div role="tabpanel" class="tab-pane fade" id="tab2">Some text</div>
  <div role="tabpanel" class="tab-pane fade" id="tab3">Just fill this pace</div>
  <div role="tabpanel" class="tab-pane fade" id="tab4">Some more texts</div>
</div>

Check this Demo

DaniP
  • 37,813
  • 8
  • 65
  • 74