Question

I’m working with Twitter Bootstrap for the first time. Everything seems to be working correctly except my top navigation needs tweaked.

We have a menu button which opens the main nav dropdown. Then we have a search button which opens a search form dropdown.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar menubutton" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="menu">Menu</span>
      </a>
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-search"><img src="images/search_03.png">Search</a>

      <div class="nav-collapse collapse">
        <ul class="nav">
          <li><a href="#">About Us</a></li>
          <li><a href="#">Research &amp; Innovation</a></li>
          <li><a href="#">Our Products</a></li>
          <li><a href="#">Responsibility</a></li>
          <li class="subnav"><a href="#" >Careers</a></li>
          <li class="subnav"><a href="#" >Newsroom</a></li>
          <li class="subnav"><a href="#" >Contact Us</a></li>
          <li class="navfoot">This is a mobile version of our website<br/>
          <a href="#">View full site</a></li>
        </ul>
      </div><!--/.nav-collapse -->
      <div class="nav-search collapse">
            <div class="search_box">
            <form action="" method="post">
                <input type="text" value="Enter Search"><a href="#">Search</a>
            </form>
            </div><!-- end search_box -->
      </div><!--/.nav-search -->
    </div>
  </div>
</div>​

I’ve created a jsfiddle here: http://jsfiddle.net/vsF6m/3/

The client wants only a single dropdown open at a time. Right now, the functionality is each button will toggle itself, but not close the other open dropdown.

There has to be something I’m missing. Do I need to rebuild how that nav bar is assembled?

Thanks!

Answer 1

Here’s something more along the lines of how Bootstrap implements accordion functionality with the Collapse plugin. My first inclination was to recommend just using the accordion markup for your purposes, but unfortunately some of the markup used to set up the accordion functionality (namely, the class .accordion-group), has visual styles associated with it, so it’s probably just easier to use a watered down version of the code targeted to what you require.

Here’s the relevant snippet:

$('.navbar').on('show', function () {
  var actives = $(this).find('.collapse.in')
    , hasData

  if (actives && actives.length) {
    hasData = actives.data('collapse')
    if (hasData && hasData.transitioning) return
    actives.collapse('hide')
    hasData || actives.data('collapse', null)
  }
})

This will close any other open collapse elements found within the delegated parent, which in this case is .navbar. In practice I recommend using an ID rather than a class to select the delegated parent.

JSFiddle