Bootstrap Collapse doesn't toggle after you show, hide or toggle from code

Answer 1

Try activating your content as a collapsible element first. I skimmed over this part when reading the documentation and it really stumped me.

$('#myCollapsible').collapse({
    toggle: false
})

After you activate it you can hide and show it as usual.

$('#myCollapsible').collapse('hide');
$('#myCollapsible').collapse('show');

http://getbootstrap.com/javascript/#collapse-methods

Answer 2

1.Try to use collapse() with options, the 'parent' is important

$("#collapseMenu").collapse({"toggle": true, 'parent': '#navaccordion'});
$("#collapseQuickLinks").collapse({"toggle": true, 'parent': '#navaccordion' });

Fiddle: http://jsfiddle.net/hieuh25/Xut4C/6/

2.Basically you have 2 ways:

• Add class in to that div, e.g: <div id="collapseMenu" class="accordion-body collapse in"> cause that div to open.

• Use collapse() with option 'toggle': true as above, when the div is closed.

Hope it helps.

Answer 3

You also can add data-parent="#navaccordion" to <div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> and call without addional key 'parent' like .collapse({"toggle": true});