Javascript animated collapsible panels without any frameworks

This article is hopelessly obsolete nowadays. There are better ways to handle the animation, either via CSS transitions or with requestAnimationFrame().

If you need to make collapsible panels that remember their state, but don’t want to use any javascript framework, this tutorial will help you do this with no headaches – and you’ll learn some neat javascript tricks too!

In case you’re wondering why no frameworks, the reason is two-fold.

• First, although frameworks are nice, they’re BIG. jQuery weighs over 50Kb; it’s not much if you’re building an entire web app, but if you’re only looking for some specific effect, it’s overkill considering that you can achieve the same thing in less that 3Kb. (Note: To add insult to injury, if you are using a CMS or blog with plugins, they sometimes use different frameworks, so the page ends up loading jQuery, MooTools and Scriptaculous to display some simple effects.)
• Second, by doing it yourself, you have the potential to actually learn more about javascript (only if you want to — the code I’m presenting is pretty much plug-and-play) and reuse the concepts to do other things – like a collapsible tree menu for example.

Features at a glance

• works with any number of panels in a page;
• plug-and-play – can be used with little or no tweaks;
• shows different arrows and style for the expanded/collapsed state;
• animated transitions;
• each panel’s state is saved and remembered between sessions;
• tested in IE6, IE7, IE8, Firefox 3, Chrome, Safari 4 and Opera 9.

Start with layout and style

For this tutorial we’ll use a minimal style; since the article is not about CSS, I will only briefly cover this.

HTML

The required HTML for a panel is very simple:

<div class="panel">
<h2>One panel</h2>
<div class="panelcontent">... content goes here ...</div>
</div>

We have a DIV that encloses the title (in our case a H2 tag, but you could use something else) and another DIV that will hold the actual content. We need this kind of nested structure, but if anyone thinks of a more semantic approach, it can be changed.

CSS

For our panel we will use two main classes, .panel (for expanded state) and .panelcollapsed (for the collapsed state), like this:

.panel, .panelcollapsed
{
	background: #eee;
	margin: 5px;
	padding: 0px 0px 5px;
	width: 300px;
	border: 1px solid #999;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

Feel free to change the layout as you see fit. Note that in the example above Firefox and Webkit-based browsers (Chrome and Safari) will also get some nice rounded corners.

For headings I’m using an arrow icon on the background, the rest of the style is pretty plain:

.panel h2, .panelcollapsed h2
{
	font-size: 18px;
	font-weight: normal;
	margin: 0px;
	padding: 4px;
	background: #CCC url(arrow-up.gif) no-repeat 280px;
	border-bottom: 1px solid #999;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
}

For a collapsed panel, we want to change the style slightly and change the arrow direction:

.panelcollapsed h2
{
	background: #CCC url(arrow-dn.gif) no-repeat 280px;
	border-color: #CCC;
}

I also wanted to add a little ‘rollover’ effect on the heading (not visible in IE6):

.panel h2:hover, .panelcollapsed h2:hover { background-color: #A9BCEF; }

Finally, we’ll add just a little style for the panel content:

.panelcontent
{
	background: #EEE;
	overflow: hidden;
}

.panelcollapsed .panelcontent { display: none; }

Adding the interactivity

Because I wanted the html to be as simple as possible and to work with any number of panels, I did not add links with onclick handlers (e.g. ) and I also didn’t want to have to add IDs to panels. Therefore, I made the script ‘smart’ enough to discover the panels and add the onclick handlers by itself. This is not as hard as it may seem:

var PANEL_NORMAL_CLASS    = "panel";
var PANEL_COLLAPSED_CLASS = "panelcollapsed";
var PANEL_HEADING_TAG     = "h2";

function setUpPanels()
{
	var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG);

	for (var i=0; i < headingTags.length; i++)
	{
		var el = headingTags[i];
		if (el.parentNode.className != PANEL_NORMAL_CLASS && el.parentNode.className != PANEL_COLLAPSED_CLASS)
			continue;
		el.onclick = function()
		{
			var target    = this.parentNode;
			var collapsed = target.className == PANEL_COLLAPSED_CLASS;
			target.parentNode.className = collapsed ?  PANEL_NORMAL_CLASS : PANEL_COLLAPSED_CLASS;
		};
	}
}

// Register setUpPanels to be executed on load
if (window.addEventListener)
	window.addEventListener("load", setUpPanels, false);
else
if (window.attachEvent)
	window.attachEvent("onload", setUpPanels);

First, I’m setting up some constants, just in case you’ll want to use different tags for the heading or different class names.The setUpPanels function works like this:

1. using getElementsByTagName we get all H2 headings in the page and collect them into an array;
2. we go through each collected element:
   1. test to see if it’s inside a panel by accessing its parent class name, skip if it’s not panel or panelcollapsed.
   2. add an onclick handler for the heading. This will work fine even without a link, although the hover effect will not work in IE6. The function does the following:
      1. get the heading’s parent, that’s the panel itself.
      2. get its class name, switch between panel and panelcollapsed.

Finally, we need a way to make the setUpPanels to execute upon window load. Now, instead of using a construct, we’ll use something more clever. Unfortunately, as always IE plays different, so we’ll have to use two methods: the correct DOM method via addEventListener and the IE way with attachEvent.

Making changes persistent

To be really useful for the user, the expanded/collapsed preferences should be saved in a cookie, so that the next time the page is loaded, the panels are already expanded or collapsed. For this, first we’ll use an object called panelsStatus that will keep the expanded/collapsed status for each panel; it will act as an associative array or a hash. The ‘key’ will be the panel’s name (the text in the H2 tag) and the value will be “true” for an expanded panel and “false” for a collapsed one.

To keep code neat, we’ll also define our cookie name with

var PANEL_COOKIE_NAME = "panels";

Saving settings

Saving will take place each time a panel is toggled.

function saveSettings(key, value)
{
	panelsStatus[key] = value;

	var panelsData = [];
	for (var key in panelsStatus)
		panelsData.push(key+":"+panelsStatus[key]);

	var today = new Date();
	var expirationDate = new Date(today.getTime() + 365 * 1000 * 60 * 60 * 24);

	document.cookie = PANEL_COOKIE_NAME + "=" + escape(panelsData.join("|")) + ";expires=" + expirationDate.toGMTString();
}

Step by step, here’s what the function does:

1. get the modified key-value pair and put it in the panelsStatus object;
2. go through all elements in the object and combine entries in a string like this: “key:value“, put in a temporary array;
3. get today date and add one year to it (that will be the cookie expiration date);
4. join the temporary array elements into one string like “key1:value1|key2:value2|key3:value3” and write in the cookie.The cookie string will look like this: panels=One%20panel%3Afalse;expires=Sun, 11 Apr 2010 09:40:22 GMT

For simplicity I’ve used “:” (colon) and “|” (pipe) as separators. If you think you’re likely to encounter those in the panel name, you can replace them with any weird character you can think of.

Loading settings

Loading will be done once, when the page is loaded.

function loadSettings()
{
	panelsStatus = {};

	var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "=");
	if (start == -1) return;
	start += PANEL_COOKIE_NAME.length+1;
	var end = document.cookie.indexOf(";", start);
	if (end == -1) end = document.cookie.length;

	var cookieValue = unescape(document.cookie.substring(start, end));
	var panelsData = cookieValue.split("|");

	for (var i=0; i< panelsData.length; i++)
	{
		var pair = panelsData[i].split(":");
		panelsStatus[pair[0]] = pair[1];
	}
}

Here’s what the code does:

1. create the panelsStatus object;
2. find the cookie name in the document.cookie string, return if not found;
3. find the end of the cookie value string (before the “;expires=“);
4. take the cookie value and split by by the “|” character, put in a temporary array;
5. go through each element in the array, split by “:” and save in the panelsStatus object as key/value pair.

Animating the transition

For some reason, people think animation is difficult in browser. It’s not. Think of it this way: any property that you can set via CSS, you can alter dynamically in javascript. To animate, you just need to call a function repeatedly, and this is most easily achieved with setTimeout or setInterval().

Preparing the transition

First, let’s define some new constants:

var PANEL_CONTENT_CLASS   = "panelcontent";
var PANEL_ANIMATION_DELAY = 20; /*ms*/
var PANEL_ANIMATION_STEPS = 10;

So, we have defined the class name for the panel content, the delay in milliseconds between two calls to the animation function and the total number of steps to use for the animation.

To keep things as flexible as possible, I wanted the script to work easily regardless of the panel height, so when animating, we’ll dynamically change the height of the panel content (that’s why it needs the overflow:hidden definition in CSS). If you want all panels to have the same height, maybe with scrollable content, I suggest adding another DIV in the panel content and setting its height and overflow.

function animateTogglePanel(panel, expanding)
{
	var elements = panel.getElementsByTagName("div");
	var panelContent = null;
	for (var i=0; i < elements.length; i++)
	{
		if (elements[i].className == PANEL_CONTENT_CLASS)
		{
			panelContent = elements[i];
			break;
		}
	}

	panelContent.style.display = "block";
	var contentHeight = panelContent.offsetHeight;

	if (expanding)
		panelContent.style.height = "0px";

	var stepHeight = contentHeight / PANEL_ANIMATION_STEPS;
	var direction = (!expanding ? -1 : 1);

	setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
}

This function expects two parameters – a reference to the panel that needs to be animated and whether it should be an expanding or collapsing animation.

1. First, it finds the DIV that has the panelcontent class by collecting all descendant DIVs and going through them until it finds the one that has the right class name. This process could have been simplified a little by using getElementsByClassName, but that function is not supported by IE (surprise, surprise).
2. Then, we need to get the height of the panel content, so we make sure it’s displayed by setting its display propery to “block” and read its height with offsetHeight property. offsetHeight return its total height, meaning defined height + paddings + border widths, so you should not define any paddings or borders in the panelcontent class, or you’ll get inaccurate results.
3. if the animation is for expanding, we need the content visible, but it has to start with a height of 0.
4. calculate by how much the panel should expand or contract on each step by dividing the total height by the number of steps, and the direction – positive for expansion, negative for contraction
5. set the timeout – here’s a tricky thing: we can’t call animateStep function directly because we need to pass the reference to the panel content to it. So we set an anonymous function, which in turn will call animateStep. It’s confusing, but it works – for more details, read about setInterval callback arguments on Mozilla Developer.

The next function is called every 20 miliseconds. It receives a reference to the panel content, the current step (iteration number), the step height and direction.

function animateStep(panelContent, iteration, stepHeight, direction)
{
	if (iteration < PANEL_ANIMATION_STEPS)
	{
		panelContent.style.height = Math.round(((direction > 0) ? iteration : PANEL_ANIMATION_STEPS - iteration) * stepHeight) +"px";
		iteration++;
		setTimeout(function(){animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
	}
	else
	{
		panelContent.parentNode.className = (direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS;
		panelContent.style.display = panelContent.style.height = "";
	}
}

What it does:

1. checks if the current iteration is smaller than the total number of iterations;
2. if it is:
   1. change the panel content height to be equal to iteration number multiplied by step height; reverse if it’s a collapsing animation;for example, consider iteration 2 with a step height of 5px, expanding. Panel content height becomes 2*5=10px; at iteration 3 it will be 3*5=15px and so on;for a collapsing animation, if the total number of steps is 10, at iteration 2 we’d have (10-2)*5 =40px, iteration 3 is (10-3)*5=35px.
   2. set the timeout to call animateStep function again after the specified delay.
3. if it’s not:
   1. switch the class name for the panel (panel content’s parent).
   2. clear any inline styles we’ve set.

Putting it all together

That’s it really. All we need to do now is to integrate the load/save and animation back into our first code.

The final javascript will look like this:

var PANEL_NORMAL_CLASS    = "panel";
var PANEL_COLLAPSED_CLASS = "panelcollapsed";
var PANEL_HEADING_TAG     = "h2";
var PANEL_CONTENT_CLASS   = "panelcontent";
var PANEL_COOKIE_NAME     = "panels";
var PANEL_ANIMATION_DELAY = 20; /*ms*/
var PANEL_ANIMATION_STEPS = 10;

function setUpPanels()
{
	loadSettings();

	// get all headings
	var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG);

	// go through all tags
	for (var i=0; i < headingTags.length; i++)
	{
		var el = headingTags[i];

		// make sure it's the heading inside a panel
		if (el.parentNode.className != PANEL_NORMAL_CLASS && el.parentNode.className != PANEL_COLLAPSED_CLASS)
			continue;

		// get the text value of the tag
		var name = el.firstChild.nodeValue;

		// look for the name in loaded settings, apply the normal/collapsed class
		// if not found in cookie leave default - collapsed or not
		if (panelsStatus[name] == "false")
			el.parentNode.className = PANEL_COLLAPSED_CLASS;
		else
		if (panelsStatus[name] == "true")
			el.parentNode.className = PANEL_NORMAL_CLASS;
		else
			panelsStatus[name] = (el.parentNode.className == PANEL_NORMAL_CLASS) ? "true" : "false";

		// add the click behavor to headings
		el.onclick = function()
		{
			var target    = this.parentNode;
			var name      = this.firstChild.nodeValue;
			var collapsed = target.className == PANEL_COLLAPSED_CLASS;
			saveSettings(name, collapsed?"true":"false");
			animateTogglePanel(target, collapsed);
		};
	}
}

/**
 * Start the expand/collapse animation of the panel
 * @param panel reference to the panel div
 */
function animateTogglePanel(panel, expanding)
{
	// find the .panelcontent div
	var elements = panel.getElementsByTagName("div");
	var panelContent = null;
	for (var i=0; i < elements.length; i++)
	{
		if (elements[i].className == PANEL_CONTENT_CLASS)
		{
			panelContent = elements[i];
			break;
		}
	}

	// make sure the content is visible before getting its height
	panelContent.style.display = "block";

	// get the height of the content
	var contentHeight = panelContent.offsetHeight;

	// if panel is collapsed and expanding, we must start with 0 height
	if (expanding)
		panelContent.style.height = "0px";

	var stepHeight = contentHeight / PANEL_ANIMATION_STEPS;
	var direction = (!expanding ? -1 : 1);

	setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
}

/**
 * Change the height of the target
 * @param panelContent	reference to the panel content to change height
 * @param iteration		current iteration; animation will be stopped when iteration reaches PANEL_ANIMATION_STEPS
 * @param stepHeight	height increment to be added/substracted in one step
 * @param direction		1 for expanding, -1 for collapsing
 */
function animateStep(panelContent, iteration, stepHeight, direction)
{
	if (iteration < PANEL_ANIMATION_STEPS)
	{
		panelContent.style.height = Math.round(((direction > 0) ? iteration : PANEL_ANIMATION_STEPS - iteration) * stepHeight) +"px";
		iteration++;
		setTimeout(function(){animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
	}
	else
	{
		// set class for the panel
		panelContent.parentNode.className = (direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS;
		// clear inline styles
		panelContent.style.display = panelContent.style.height = "";
	}
}

// -----------------------------------------------------------------------------------------------
// Load-Save
// -----------------------------------------------------------------------------------------------
/**
 * Reads the "panels" cookie if exists, expects data formatted as key:value|key:value... puts in panelsStatus object
 */
function loadSettings()
{
	// prepare the object that will keep the panel statuses
	panelsStatus = {};

	// find the cookie name
	var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "=");
	if (start == -1) return;

	// starting point of the value
	start += PANEL_COOKIE_NAME.length+1;

	// find end point of the value
	var end = document.cookie.indexOf(";", start);
	if (end == -1) end = document.cookie.length;

	// get the value, split into key:value pairs
	var cookieValue = unescape(document.cookie.substring(start, end));
	var panelsData = cookieValue.split("|");

	// split each key:value pair and put in object
	for (var i=0; i< panelsData.length; i++)
	{
		var pair = panelsData[i].split(":");
		panelsStatus[pair[0]] = pair[1];
	}
}

/**
 * Takes data from the panelsStatus object, formats as key:value|key:value... and puts in cookie valid for 365 days
 * @param key	key name to save
 * @paeam value	key value
 */
function saveSettings(key, value)
{
	// put the new value in the object
	panelsStatus[key] = value;

	// create an array that will keep the key:value pairs
	var panelsData = [];
	for (var key in panelsStatus)
		panelsData.push(key+":"+panelsStatus[key]);

	// set the cookie expiration date 1 year from now
	var today = new Date();
	var expirationDate = new Date(today.getTime() + 365 * 1000 * 60 * 60 * 24);
	// write the cookie
	document.cookie = PANEL_COOKIE_NAME + "=" + escape(panelsData.join("|")) + ";expires=" + expirationDate.toGMTString();
}

// -----------------------------------------------------------------------------------------------
// Register setUpPanels to be executed on load
if (window.addEventListener)
{
	// the "proper" way
	window.addEventListener("load", setUpPanels, false);
}
else
if (window.attachEvent)
{
	// the IE way
	window.attachEvent("onload", setUpPanels);
}

As you can see, the code is fully commented, so any details I’ve left out you should understand easily.

Updates

21 May 2010: Added the option to Expand/Collapse all panels.