Useful JavaScript: Expandable/Collapsable Divs
Keeping with the theme of my recent JavaScript posts, here are a couple of simple JavaScript functions that are extremely useful for creating a clean user interface. The scripts themselves are simple, but together they allow you to create the effect of a div that expands and collapses to show or hide its contents.
function findElement(element_id) {
if (document.getElementById && document.getElementById(element_id)) {
return document.getElementById(element_id);
} else {
return false;
}
}
function hideElement(element_id) {
element = findElement(element_id)
if (element) {
element.style.display = 'none';
return element;
} else {
return false;
}
}
function showElement(element_id) {
element = findElement(element_id)
if (element) {
element.style.display = '';
return element;
} else {
return false;
}
}
</script>
The first function simply locates an element on a page. For example, if you pass it an element_id like “sidebar” it will locate the element with that id, such as <div id=”sidebar”>. The second two functions use findElement to locate the element and then either tell it to display on the page or not. So a hidden element can be revealed or a visible element can be hidden.
Though simple, these functions allow us to perform a nice slight-of-hand. We can hide a large block of text but leave the title or a short summary visible. Clicking on the title will reveal the full text in a larger div. Clicking it again will re-hide it. The effect is made even better by adding arrow icons: right-facing (or left-facing) for the “collapsed” or hidden state, downward-facing for the “expanded” or visible state.
Here is an example:
First Section
First SectionHere’s how you can do it yourself. Put the above JavaScript on a page. Next, create two div elements. In the first, put the collapsed or summary view. In the second, put the expanded view with the full text and give the div a style attribute of “display: none;” to hide it when the page first loads. Now you need to two links. In the first div put a link that shows the second div and hides itself. In the second div, put a link that shows the first div (remember: when this link is visible, the first div won’t be anymore) and hides itself.
<a href="#" onclick="showElement('text'); hideElement('text_off'); return false;">
<img src="icon_arrow_right.gif" /> Text Title</a>
</div>
<div id="text" style="display: none;">
<a href="#" onclick="showElement('text_off'); hideElement('text'); return false;">
<img src="icon_arrow_down.gif" /> Text Title</a><br />
<p>Longer text goes here.</p>
<p>Click the title again to collapse the view.</p>
</div>
Because one div hides at the same time as the next one displays, and because all the other page elements shift up or down, the effect is that the original div has simply “opened up” to reveal its contents. You could also reverse the effect—start with an expanded div that can be folded out of the way—by simply moving “display: none;” to the other div. You can add more expandable divs to the page and, provided you give them unique ids, they will all work.
It is a simple way to put a lot of information at the user’s fingertips without overloading the page all at once. It also could save you additional page loads or MySQL calls that would result from putting the same data on a different page.
May 30th, 2008 at 12:01 pm
You should really consider using some kind of JS loader to add these events, instead of modifying the code directly. Not only will it move things out of your HTML, it can be cached, etc, blah blah blah.
Plus, it looks pretty to not have those onclicks.
May 30th, 2008 at 12:11 pm
You could and you could also use various JavaScript libraries to do the showing and hiding.
This is just a simplified version to illustrate the process.
August 22nd, 2008 at 10:54 am
you should have considered implementing opening one div while closing previously open divs.
August 25th, 2008 at 2:45 pm
Love it!! Just applied it to our site and works great. It may also be of interest to know that this is a good tool for SEO. Google has gotten much better at crawling text within java so it counts for keyword density and such. I would also like to learn how to do a scrolling java div such as the one at the bottom of this site:
http://www.volusion.com/
Thanks again!