Geek Answers Handbook

Twitter Bootstrap, how to make the plugin collapse to close an open element and open a new click

I have what I thought was just setting up the twtter bootstrap configuration item to the left of my page: http://papershare.ravennainteractive.com/single-item.html

When you click one title of the accordion, it opens, but when you click another, it opens it, not closes the first and opens the second.

I updated the site to the latest bootable js and css.

How do I close it open when opening another?

thanks

+4
source share
3 answers

The structure should be (in pseudo-code)

< class="accordion" id="myAccordion"> < class="accordion-group"> < class="accordion-header"> <a data-parent="#myAccordion"> < class="accordion-body"> < class="accordion-group"> < class="accordion-header"> <a data-parent="#myAccordion"> < class="accordion-body">

Where accordion-group represents the individual parts that will fall apart separately. The data-parent class in links that switch accordion groups is what is used to determine that other accordion groups in the same parent should be closed.

+5
source

If you made the HTML markup according to the loading collapses of the docs , you can achieve this with this simple jQuery copy / paste code.

 $(document).on('click', '.accordion-toggle', function(e) { event.preventDefault(); $('#accordion').find('.accordion-body').collapse('hide'); $(this).parent().next().collapse('show'); });
+1
source

I had a similar problem, but the original data-parent parameter did not work.

My problem was that on my page there were two groups of groups linking to the same #accordion identifier. The solution was to give each group a unique identifier

 <!-- Accordion 1 --> < class="accordion" id="myAccordion"> < class="accordion-group"> < class="accordion-header"> <a data-parent="#myAccordion"> < class="accordion-body"> < class="accordion-group"> < class="accordion-header"> <a data-parent="#myAccordion"> < class="accordion-body"> <!-- Accordion 2 --> < class="accordion" id="myAccordion-2"> < class="accordion-group"> < class="accordion-header"> <a data-parent="#myAccordion-2"> < class="accordion-body"> < class="accordion-group"> < class="accordion-header"> <a data-parent="#myAccordion-2"> < class="accordion-body">

Pretty obvious in retrospect; -)

0
source

More articles:


All Articles