Twitter Bootstrap Question posted in

Twitter Bootstrap's Dropdown menu not working in Nav-Tabs NavBar in JS Fiddle

I’ve been having so many problems getting this Twitter Bootstrap Nav bar to work in JS Fiddle; I finally got it to render the way I wanted nothing is dropping down from my dropdown menu (under the tab “Community”)- I don’t know what the problem is. I got it to work functionally when I did it in a text-editor, my code seems to be exactly the same, but in JS Fiddle (where I need it to work) when I press the button, nothing drops down & I can’t figure out why, I’ve tried changing so many things- if anyone can help or direct me to why this isn’t working, I’d so so appreciate it (I tried changing the li to a div which ruined the styling of the whole thing, I tried adding data-toggle to each <a> element in the dropdown, also nothing, I just don’t know what to do at this point or what I’m doing wrong. I hope I have enough/the right external resources added to this (in JS Fiddle, you can’t add them to the html or it doesn’t render correctly). Any help would be greatly appreciated.
Here’s a link to my Fiddle: https://jsfiddle.net/Tamara6666/2cup6cno/
Heres’ my code:

<header>
</header>

<body>
  <ul id="myTab" class="nav nav-tabs">
    <li>
      <a href="#">
        <icon class="fa fa-home"></icon>
      </a>
    </li>
    <li role="presentation" class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Community</a>
      <ul class="dropdown-menu">
        <li><a href="#">Member Activity</a></li>
        <li><a href="#">Member Forum</a></li>
        <li><a href="#">Member Lists</a></li>
        <li><a href="#">Member Groups</a></li>
      </ul>
    </li>
    <li role="presentation"><a href="#">Pet Help</a></li>
    <li role="presentation"><a href="#">Pets for Sale</a></li>
    <li role="presentation"><a href="#">Pet Services</a></li>
  </ul>
<main>
<div id='content' class="tab-content">
      <div class="tab-pane active" id="home">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>    

</main>
</body>
Tags:

2

Answers


  1. 0

    Add
    <script type="text/javascript">$(".dropdown-toggle").dropdown();</script>
    </body>

    Also don’t forget to add jquery before including bootstrap.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    Login or Signup to reply.
  2. 0

    You didn’t include jQuery, as Bootstrap.js requires jQuery. If you open the browser console, the error is caught there Uncaught Error: Bootstrap's JavaScript requires jQuery

    Adding jQuery will fix the issue you’re having. I’ve revised your fiddle (https://jsfiddle.net/2cup6cno/9/) to include the other tab panes. You can modify them or remove it, completely up to you.

    Check out the examples on Bootstrap on the correct markup and usage of using tabs at http://getbootstrap.com/javascript/#tabs

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search