Bootstrap - Toggle navigation and accordion panel simultaneously

Question

I'd like to have a menu button that opens a custom slide-in nav and a specific bootstrap accordion panel (within the nav) simultaneously on one click. I have the slide-in menu and accordion working independently. The button currently opens the menu but can't figure out how to have it also expand a panel. Ideally I'd like the panel to open after the menu opens with a slight delay .

Please check this working JSFIDDLE for details

Thanks!

 jQuery(document).ready(function($) { var open = false; var openSidebar = function() { $('.menu--slide-right').addClass('is-active'); $('.toggle-menu').addClass('is-active'); $('#toggle-menu').addClass('toggle-close'); open = true; } var closeSidebar = function() { $('.menu--slide-right').removeClass('is-active'); $('.toggle-menu').removeClass('is-active'); $('#toggle-menu').removeClass('toggle-close'); open = false; } $('.toggle-menu').click(function(event) { event.stopPropagation(); var toggle = open ? closeSidebar : openSidebar; toggle(); }); $(document).click(function(event) { if (!$(event.target).closest('.menu--slide-right').length) { closeSidebar(); } }); }); 

 <header class="navbar nav-main navbar-fixed-top" role="banner"> <ul class="nav nav--right"> <li class="v-button--slide-right" id="toggle-menu"> <button class="mpp-menu-icon mpp-menu-icon--cross toggle-menu"> <span class="toggle"></span> <span class="menu">menu</span> </button> </li> </ul> <nav id="menu--slide-right" class="nav menu--slide-right"> <ul class="main-menu"> <li><a href="http://mpp.viabli.com/">Home</a></li> <ul aria-multiselectable="true" role="tablist" id="accordion" class="panel-group"> <li class="panel"> <a aria-controls="dropdown-menu--resources" aria-expanded="false" data-target="#dropdown-menu--resources" data-parent="#accordion" data-toggle="collapse">Resources <span class="expand-icon fa fa-angle-down"></span></a> <div aria-labelledby="headingOne" role="tabpanel" class="panel-collapse collapse" id="dropdown-menu--resources"> <ul class="v-dropdown-menu"> <li><a href="http://mpp.viabli.com/resources/blog/"><span class="link-icon fa fa-angle-right"></span> Blog</a></li> <li><a href="http://mpp.viabli.com/resources/faq/"><span class="link-icon fa fa-angle-right"></span> FAQ</a></li> <li><a href="http://mpp.viabli.com/resources/glossary/"><span class="link-icon fa fa-angle-right"></span> Glossary</a></li> <li><a href="http://mpp.viabli.com/resources/shipping-info/"><span class="link-icon fa fa-angle-right"></span> Shipping info</a></li> </ul> </div> </li> </ul> <!-- end panel-group --> <li><a href="http://mpp.viabli.com/capabilities/">Capabilities</a></li> <li><a href="http://mpp.viabli.com/contact/">Contact</a></li> </ul> </nav> </header> 

Answer 1

use the in and collapse classes

var openSidebar = function(){
    ...
    $('#dropdown-menu--resources').addClass('in');
    open = true;
}
var closeSidebar = function(){
    ...
    $('#dropdown-menu--resources').removeClass('collapse');
    open = false;
}

Answer 2

Try this

Added $(".collapse").collapse('show'); in openSidebar and $(".collapse").collapse('hide'); in closeSidebar.

var openSidebar = function(){
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
$(".collapse").collapse('show');
open = true;
}

var closeSidebar = function(){
$('.menu--slide-right').removeClass('is-active');
$('.toggle-menu').removeClass('is-active');
$('#toggle-menu').removeClass('toggle-close');
$(".collapse").collapse('hide');
open = false;
}