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


my html is:

<div id="accordion-container">     <div class="accordion" id="navaccordion">         <div class="accordion-group">             <div class="accordion-heading">                 <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapsemenu">                     <strong>my menus</strong>                 </a>             </div>             <div id="collapsemenu" class="accordion-body collapse in">                 <div class="accordion-inner">                     <div class="navigation" id="navigationcontainer">                         <span id="menutree">                             menutree                         </span>                     </div>                 </div>             </div>         </div>         <div class="accordion-group">             <div class="accordion-heading">                 <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapsequicklinks">                     <strong>quick links</strong>                 </a>             </div>             <div id="collapsequicklinks" class="accordion-body collapse">                 <div class="accordion-inner">                     <div class="quicklinks" id="quicklinkscontainer">                         <span id="quicklinkslist">                             quicklinks                         </span>                     </div>                 </div>             </div>         </div>         <div class="accordion-group">             <div class="accordion-heading">                 <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapsequeue">                     <strong>queue</strong>                 </a>             </div>             <div id="collapsequeue" class="accordion-body collapse">                 <div class="accordion-inner">                     <div class="queue" id="queuecontainer">                         <span id="queuetree">                             queue                         </span>                     </div>                 </div>             </div>         </div>     </div> </div>

my example here: http://jsfiddle.net/pdavis68/xut4c/2/

if remove javascript code, you'll notice toggling of collapse operates properly. if click "quick links", "my menus" closes , "quick links" opens.

if leave js in, you'll notice opening "my menus" or "quick links" doesn't cause else collapse, if open "queue", still cause others collapse.

it doesn't seem matter if use "toggle", "show" or "hide" command in collapse, break toggling functionality.

also, in example, ought happen (by reckoning, @ least) that "my menus" should toggle closed (which does) , "quick links" ought toggle open (which not do.)

so, 2 questions:

  1. how programmatically show/hide groups without breaking toggle functionality?

  2. how toggle things open?

1.try use collapse() options, 'parent' important

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

fiddle: http://jsfiddle.net/hieuh25/xut4c/6/

2.basically have 2 ways:

  • add class in div, e.g: <div id="collapsemenu" class="accordion-body collapse in"> cause div open.

  • use collapse() option 'toggle': true above, when div closed.

hope helps.


Comments

Post a Comment