I'm trying to create an "expandable" menu. So, if a user clicks on option A two suboptions should show up. I'm trying to do something like this but in a menu...

This is my code so far...

<li>
 <a href="?op=1" data-toggle="collapse" data-target=".nav-collapse88"><i class="icon-picture icon-white"></i> Galleries</a>
                        <div class="nav-collapse88">
                            <ul>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Add</a>
                                  </li>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Delete</a>
                                  </li>
                             </ul>
                        </div>
                      </li>

So when I click on galleries the options Add and Delete should appear. Any suggestions?

I'm trying to create an "expandable" menu. So, if a user clicks on option A two suboptions should show up. I'm trying to do something like this but in a menu...

This is my code so far...

<li>
 <a href="?op=1" data-toggle="collapse" data-target=".nav-collapse88"><i class="icon-picture icon-white"></i> Galleries</a>
                        <div class="nav-collapse88">
                            <ul>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Add</a>
                                  </li>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Delete</a>
                                  </li>
                             </ul>
                        </div>
                      </li>

So when I click on galleries the options Add and Delete should appear. Any suggestions?

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Dec 14, 2012 at 14:53 Michael Berkowski 271k4747 gold badges450450 silver badges394394 bronze badges asked Dec 14, 2012 at 14:24 CornwellCornwell 3,41088 gold badges5454 silver badges8585 bronze badges 1

• Bootstrap Dropdown Reference – Mark Meyer Commented Dec 14, 2012 at 14:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I would nest ul's like so:

<ul>
   <li>
      <a class="expand">Link used to expand</a>
      <ul>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
      </ul>
  </li>
</ul>

The I would use this jquery:

$(document).on('click', 'a.expand', function(e) {
  e.preventDefault();
  $(this).siblings('ul').slideToggle();
});

You would need to set the sub menu CSS to display none.

Something along these lines should do the trick.

This works:

<ul>
  <li class="dropdown">
    <a href="?op=1">Support</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href=""><i class="icon-play"></i> Add</a></li>
      <li><a href=""><i class="icon-play"></i> Delete</a></li>
    </ul>
  </li>
</ul>

I believe you want the class to be dropdown not collapse. That's how the bootstrap documentation remends it for menus.

Change the class to be dropdown, remove the inner div, and add the class dropdown-menu the inner ul.

<li class="dropdown">
<a href="?op=1" data-toggle="dropdown"><i class="icon-picture icon-white"></i>>Galleries</a>
                        <ul class="dropdown-menu">
                              <li>
                                <a href=""><i class="icon-play"></i> Add</a>
                              </li>
                              <li>
                                <a href=""><i class="icon-play"></i> Delete</a>
                              </li>
                         </ul>
                  </li>

tyy this http://jsfiddle/68RXP/213/

$(function(){
        $(".nav-collapse88").hide();
        $("a").click(function(e){
            e.preventDefault();
            $(".nav-collapse88", $(this).parent()).slideToggle();        
        });
    })​
<li>
 <a href="?op=1">
     <i class="icon-picture icon-white"></i> Galleries</a>
                        <div class="nav-collapse88">
                            <ul>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Add</a>
                                  </li>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Delete</a>
                                  </li>
                             </ul>
                        </div>
                      </li>​