Twitter Bootstrap: How to create a dropdown button with an accordion inside it?

Question

In Twitter Bootstrap, I am trying to create a button dropdown with an accordion inside it.

the purpose is to present a long list of items in a concise form (i.e. av

Answer 1

You can insert an accordion inside a dropdown using :

• Bootstrap Dropdown component
• Bootstrap Collapse component

You'll need to add a few lines of JS to prevent Dropdown events to break Collapse ones.

Working example on Bootply

  Dropdown trigger 
  

    

      

        

          

            

              
                Unit 1
              
            
          
          

            

              Item a

              Item b
            
          
        
        

          

            

              
                Unit 2
              
            
          
          

            

              Item a

              Item b

              Item c
            
          
        
      
    
  

.dropdown-accordion .panel-heading {
  padding: 0;
}
.dropdown-accordion .panel-heading a {
  display: block;
  padding: 10px 15px;
}

// Collapse accordion every time dropdown is shown
$('.dropdown-accordion').on('show.bs.dropdown', function (event) {
  var accordion = $(this).find($(this).data('accordion'));
  accordion.find('.panel-collapse.in').collapse('hide');
});

// Prevent dropdown to be closed when we click on an accordion link
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) {
  event.preventDefault();
  event.stopPropagation();
  $($(this).data('parent')).find('.panel-collapse.in').collapse('hide');
  $($(this).attr('href')).collapse('show');
})