A javascript hack to have Spry CollapsiblePanels remember their state

Adobe Dreamweaver uses the Spry CollapsiblePanel plugin to create boxes that expand and collapse when a heading is clicked.

The following code allows the open/close state of the panels on a page to be remembered when the page is reloaded, or when history is accessed. It can also be used to share the open/close state between many pages containing the same panels.

It uses the sessvars.js framework to access javascript session state. This can be downloaded from the same page where you can find the documentation. Alternatively, here's a mirrored copy.

// Assumes global object sessvars from sessvars.js
// http://www.thomasfrank.se/sessionvars.html

$(function() {
	var rememberState,
		listOfPanels;
	
	// ---
	// Checks whether the panel with ID id is currently open, and remembers
	// that state in a session variable.
	// ---
	rememberState = function(ids) {
		var id;
		
		for (var i = 0; i < ids.length; i++) {
			id = ids[i];
			if (window[id].isOpen()) {
				sessvars[id] = true;
			}
			else {
				delete sessvars[id];
			}
		}
	};
	
	listOfPanels = $(".CollapsiblePanel")
		.map(function() { return this.id })
		.get();
	
	// Rememebr the state before leaving the page for some reason
	$(window).bind('beforeunload', function(){
	  rememberState(listOfPanels);
	});
	
	// For each ID
	for(var i = 0; i < listOfPanels.length; i++) {
		var thisPanelId = listOfPanels[i],
			// Closed by default
			thisPanelState = false;
		
		// Set default state as open on load if cookie is there
		thisPanelState = (sessvars[thisPanelId] === true);
		
		// Wire it and set it to its default state
		// Note: the var name (as accessed via window[] is the same
		//       as the div ID that it corresponds to)
		window[thisPanelId] = new Spry.Widget.CollapsiblePanel(
			thisPanelId,
			{contentIsOpen: thisPanelState});
		
		delete sessvars[thisPanelId];
	}
	
});

You should include this right at the bottom of the html file containing the panels, like this:

<!-- Wire panels -->
<script type="text/javascript" src="wire_panels.js"></script>

And this should replace the javascript which Dreamweaver added to create the panels.