Search code examples
twitter-bootstraptwitter-bootstrap-3bootstrap-tabs

Tabs not working when they are clicked

I have two divs in a row. The first div uses the media class,and the second one uses the tab-content class. Basically inside the second div I want to have a tabbed navigation animation. To have a better understanding,I am illustrating what's just said.

tabbed animation

However,when I click the other tabs nothing happens. Here is my code

<ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                <a href="#history" aria-controls="history"
                 role="tab" data-toggle="tab">History</a></li>

                 <li role="presentation">
                 <a href="#events"
                 aria-controls="events" role="tab"
                 data-toggle="tab">Events</a></li>

                 <li role="presentation">
                 <a href="#tickets"
                 aria-controls="tickets" role="tab"
                 data-toggle="tab">Tickets</a></li>

                 <li role="presentation">
                 <a href="#hours"
                 aria-controls="hours" role="tab"
                 data-toggle="tab">Hours</a></li>
 </ul>
 <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="history">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>   
            </div>
            <div role="tabpanel" class="tab-pane fade" id="events">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>   
            </div>
             <div role="tabpanel" class="tab-pane fade" id="tickets">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>   
            </div>
            <div role="tabpanel" class="tab-pane fade" id="hours">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>   
            </div>
 </div>

Any ideas?

Thanks, Theo.

Solution 

  • <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
             

           </style>
           </head>
           <body>
           <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                <a href="#history" aria-controls="history"
                 role="tab" data-toggle="tab">History</a></li>

                 <li role="presentation">
                 <a href="#events"
                 aria-controls="events" role="tab"
                 data-toggle="tab">Events</a></li>

                 <li role="presentation">
                 <a href="#tickets"
                 aria-controls="tickets" role="tab"
                 data-toggle="tab">Tickets</a></li>

                 <li role="presentation">
                 <a href="#hours"
                 aria-controls="hours" role="tab"
                 data-toggle="tab">Hours</a></li>
 </ul>
 <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="history">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>   
            </div>
            <div role="tabpanel" class="tab-pane fade" id="events">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>   
            </div>
             <div role="tabpanel" class="tab-pane fade" id="tickets">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>   
            </div>
            <div role="tabpanel" class="tab-pane fade" id="hours">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>   
            </div>
 </div>

  </body>
  </html>

    Look at the above snippet it is working fine.

    SUGGESTIONS:

    1.Post your full code.

    1. Make sure your bootstrap cdn's are included only once.

    2. make sure tab id's are not duplicated in the rest of your html code.

    3. also the order of the cdn's are important. include them in the same oredr as mine.