Accordion menu in bootstrap 3

Question

Here is the fiddle . Is there any option that I can close sub menu when I click outside the div?

      <div class="accordion-group">
          <div class="accordion-heading">
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseTwo">
                   <i class="icon-th"></i> Layout
                </a>
          </div>
          <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
               <div class="accordion-inner">
                   <ul>
                      <li>This is one</li>
                      <li>This is two</li>
                      <li>This is Three</li>
                   </ul>
               </div>
           </div>
       </div>

I'm using bootstrap 3.

Answer 1

If you see the docs you can use the .collapse('hide') method for closing.

.collapse('hide')

Hides a collapsible element.

Update:

On document click you will have to check if the clicked element is outside.

$(document).on('click', function (e) {
    // here you can change document to any div id 

    if (!$(e.target).closest('#leftMenu').hasClass('accordion')) { // checking if clicked element is outside `accordion` then only collapse

        $('.in').collapse('hide'); // .in as we need to collapse only the expanded section
    }
});

See Fiddle