I'm not sure if this is possible, but I hope someone can direct me in the right direction to achieve what I wish to achieve.
I'm building a website around bootstrap from twitter; I use bootstrap collapse on a section box. This box isn't collapsed by default, but if a user pushes a button and collapses the box; I want this information to be stored in some kind of cache on the client side even after page refresh.
Let's say the user collapses them, and returns tomorrow; then they would still be collapsed until the user pushes the button again.
I won't include any of my code as I suspect there are more to this than only the added classes (I use the default one anyway), nor can I link to the project as it is not available outside of our intranet.
Here's a copy from bootstrap up on jsfiddle, though.
/
Any help would be appreciated. Thanks in advance.
I'm not sure if this is possible, but I hope someone can direct me in the right direction to achieve what I wish to achieve.
I'm building a website around bootstrap from twitter; I use bootstrap collapse on a section box. This box isn't collapsed by default, but if a user pushes a button and collapses the box; I want this information to be stored in some kind of cache on the client side even after page refresh.
Let's say the user collapses them, and returns tomorrow; then they would still be collapsed until the user pushes the button again.
I won't include any of my code as I suspect there are more to this than only the added classes (I use the default one anyway), nor can I link to the project as it is not available outside of our intranet.
Here's a copy from bootstrap up on jsfiddle, though.
http://jsfiddle/B43hy/
Any help would be appreciated. Thanks in advance.
Share Improve this question asked Aug 5, 2012 at 17:20 arvdsnarvdsn 751 gold badge2 silver badges7 bronze badges2 Answers
Reset to default 14You can try using either cookies or HTML5 LocalStorage. Both of these mechanisms store client-side data. You should pick one of them (and in the case of cookies, write a get/set function).
Then you need to give each collapse element an id that is unique across the entire site, so that it doesn't conflict with any elements on other pages. Every time a user collapses an element, you save the id on the client. Every time a user un-collapses an element, you remove the id from storage. You can use the events that Bootstrap throws, like so:
$('.collapse').on('hidden', function() {
// store this.id
}).on('shown', function() {
// delete this.id
});
When you load a page, inside your $( document ).ready function you should add the following check:
$(document).ready(function(){
$(".collapse").collapse().each(function(){
if( isStored( this.id ) ) {
$( this ).collapse( 'hide' );
}
});
});
This will check to see if any of the collapse elements should be closed and hides them if so. The isStored method should be the one checking the cookies or LocalStorage to see if the id is there.
If you have a lot of these collapses on your site, then you will probably use a lot of ids for them. In this case, cookies might be a bad option because they will get transmitted to the server on every request, slowing down the connection with no real purpose. LocalStorage doesn't suffer from this flaw, and it's easier to user overall, but (like many HTML5 features) it only works in newer browsers.
I use jQuery storage api plugin, which allows you to put in cookie, local storage, namespace and session storage.
My code to remember the state of Bootstrap collapse fields is this easy:
// Open/close the collapse panels based on history
var storage = $.localStorage;
$('.collapse').on('hidden.bs.collapse', function () {
storage.remove('open_' + this.id);
});
$('.collapse').on('shown.bs.collapse', function () {
storage.set('open_' + this.id, true);
});
$('.collapse').each(function () {
// Default close unless saved as open
if (storage.get('open_' + this.id) == true) {
$(this).collapse('show');
}
});