Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Retain Twitter Bootstrap Collapse state on Page refresh/Navigation

I'm using Bootstrap "collapse" plugin to make an accordion for a long list of links. The accordion-body tag includes "collapse" so all the groups are collapsed when the page loads. When you open a group and click on a link, it takes you to a new page to see some detail and then you click a back link or the browser back to return to the list. Unfortunately, when you return the accordion is back in its collapsed state and you have to open the group again and find where you were. I anticipate a lot of this back and forth navigation and this behavior is going to be frustrating.

Is there some way to preserve the user's place and go back to it, or just prevent the page from reloading or the javascript from firing again.

I thought the solution might be along these lines, but not sure. Twitter bootstrap: adding a class to the open accordion title

like image 254
gnudle Avatar asked Oct 04 '12 18:10

gnudle


People also ask

How do I keep my bootstrap collapse Open?

Just add data-toggle="collapse" and a data-target to element, to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in .

How do I stop a bootstrap collapse?

The . collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.

How does collapse work in bootstrap?

How it works. The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0 .

What does data toggle collapse do?

data-toggle = “collapse” It is used when you want to hide a section and make it appear only when a div is clicked.


1 Answers

You can very easily solve this by a cookie. There is a lot of simplified libraries, like https://github.com/carhartl/jquery-cookie as I use in the example below :

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script> 

add the following code to a script section (#accordion2 refers to the modfied twitter bootstrap example, I list afterwards)

$(document).ready(function() {     var last=$.cookie('activeAccordionGroup');     if (last!=null) {         //remove default collapse settings         $("#accordion2 .collapse").removeClass('in');         //show the last visible group         $("#"+last).collapse("show");     } });  //when a group is shown, save it as the active accordion group $("#accordion2").bind('shown', function() {     var active=$("#accordion2 .in").attr('id');     $.cookie('activeAccordionGroup', active) }); 

And you are done! Here a modified version of the example at http://twitter.github.com/bootstrap/javascript.html#collapse with clickable links, when you go back - the last shown accordion group opens up automatically

<div class="accordion" id="accordion2">   <div class="accordion-group">     <div class="accordion-heading">       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">         Collapsible Group Item #1       </a>     </div>     <div id="collapseOne" class="accordion-body collapse in">       <div class="accordion-inner">         Link : <a href="http://google.com">google.com</a>       </div>     </div>   </div>   <div class="accordion-group">     <div class="accordion-heading">       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">         Collapsible Group Item #2       </a>     </div>     <div id="collapseTwo" class="accordion-body collapse">       <div class="accordion-inner">         Link : <a href="http://stackoverflow.com">stackoverflow.com</a>       </div>     </div>   </div>   <div class="accordion-group">     <div class="accordion-heading">       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">         Collapsible Group Item #3       </a>     </div>     <div id="collapseThree" class="accordion-body collapse">       <div class="accordion-inner">         Link : <a href="http://cryptozoologynews.blogspot.com/">cryptozoology news</a>       </div>     </div>   </div> </div> 
like image 71
davidkonrad Avatar answered Sep 25 '22 10:09

davidkonrad