Bootstrap 3.2.0 togglable tabs not working

Question

I'm using bootstrap togglable tabs on a project, and the markup is this:

    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 full-height sidebar">
      <h1>Lorem ipsum</h1>
      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.</h2>

      <div class="row tab-list">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <ul id="desktopTabs" class="nav nav-tabs" role="tablist" data-tabs="tabs">
            <li class="separator"><span></span></li>
            <li class="active"><a href="#type" role="tab" data-toggle="tab">Tab 1</a></li>
            <li class="separator"><span></span></li>
            <li><a href="#brand" role="tab" data-toggle="tab">Tab 2</a></li>
            <li class="separator"><span></span></li>
            <li><a href="#model" role="tab" data-toggle="tab">Tab 3</a></li>
            <li class="separator"><span></span></li>
            <li><a href="#engine" role="tab" data-toggle="tab">Tab 4</a></li>
            <li class="separator"><span></span></li>
            <li><a href="#usage" role="tab" data-toggle="tab">Tab 5</a></li>
            <li class="separator"><span></span></li>
            <li><a href="#result" role="tab" data-toggle="tab">Tab 6</a></li>
            <li class="separator"><span></span></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 full-height tabs-content">
      <div class="tab-content">
        <div class="tab-pane fade in active" id="type">Content 1</div>
        <div class="tab-pane fade" id="brand">Content 2</div>
        <div class="tab-pane fade" id="model">Content 3</div>
        <div class="tab-pane fade" id="engine">Content 4</div>
        <div class="tab-pane fade" id="usage">Content 5</div>
        <div class="tab-pane fade" id="result">Content 6</div>
      </div>
    </div>

The thing is, when I try to switch to another tab pane by clicking in a tab link, it just won't respond. I've been looking if I skipped a data-* attribute or something, but didn't see anything like that. The code is basically the same as the one in Bootstrap's documentation page. Calling the tabs using the $().tab method isn't working either.

What am I missing here?

Any help will be very much appreciated.

Edit: provided a JSBin link as suggested in the comments -> http://jsbin.com/ravaligimexu/1/

Added to the post, works like a charm in JSBin, yet it doesn't locally. All libraries and stylesheets are loaded correctly :/ — NicolasJEngler, Oct 14 '14 at 03:20
And locally you use server or just open page in the browser? — Dmitry Shurshilin, Oct 14 '14 at 03:23
I'm using XAMPP in order to set up a local server (Apache, MySQL, FileZilla, Mercury, and Tomcat). As for the libraries, Boostrap's minified CSS, and my custom CSS, are linked on the head of the document. jQuery is included using Google Hosted Libraries, and Bootstrap's JS functions are called after jQuery, everything before the body closing tag. — NicolasJEngler, Oct 14 '14 at 03:26

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

I had the same problem but caused by including twice bootstrap.js and jquery.js files.

On a single click the event was processed twice by both jquery instances. One closed and one opened the toggle.

duplicate answer - https://stackoverflow.com/a/26403469/99248

edited May 23 '17 at 10:33

Community

1
1

answered Oct 16 '14 at 11:40

raisercostin

8,777
5
67
76

This wasn't the case, I only had 1 instance of each .js file, but it may be helpful to someone else. – NicolasJEngler Oct 16 '14 at 13:34

score 0 · Accepted Answer · answered Oct 14 '14 at 03:39

0

Moving both, jQuery and Bootstrap's functions script tags to the head of the document seems to solve the problem.

answered Oct 14 '14 at 03:39

NicolasJEngler

565
1
10
27

Bootstrap 3.2.0 togglable tabs not working

2 Answers2