dougv.com « The Web home of Doug Vanderweide

Recently asked on Yahoo! Answers:

Question about web design?

I’m just wondering, how do you make a span list? like this site: {snipped url}
like when i click on the “bowman” all the guides appear below
thanks

The sample site that this question notes works fairly simply: You click on a heading DIV, and a content DIV below it displays; you click on the same heading DIV again, and the content DIV is again hidden.

Since setting CSS styles for XHTML Document Object Model (DOM) elements is fairly easy to do with JavaScript, this task is something you can knock out easily, quickly, and with great reliability / cross-browser support.

But best of all, because all the content we will display actually resides on the page, we won’t suffer the same problem of search engine indexing or old browsers not being able to see the content, had we used AJAX.

As always, at the end of this post I have a link to a working demo you can see and save for yourself.

Step 1: Create The Styles

We’ll start by defining the styles for our page.

Each item on this page basically consists of a pair of DIVs: a clickable title and a content pane.

We’ll make the class for our title DIVs pretty basic, with a simple border and light gray background. We’ll give them a margin of 10 pixels at the top and 3 pixels at the bottom, to ensure we get enough space between titles, when all content is hidden, so that the right one gets clicked to activate its content.

div.menu {
	margin: 10px 0 3px 0;
	padding: 5px;
	background: #eee;
	border: solid 1px #000;
}

The class for the content DIVs will be similar. The biggest difference is that we set the initial display property for the class to none, so that all the content DIVs are hidden from view to the browser.

The operative word there is “browser.” Many search engines will go ahead and index the content DIVs even when their display property is set to none. Not all will — and it’s difficult to say which ones might not.

But because you’re controlling the display of the DIVs via CSS, and most spiders don’t consider CSS styles when weighting a search, you should find that this approach helps your search engine rankings, even if everything is hidden initially.

We also need to adjust the top margin of the content DIVs to be -3px, to compensate for the 3px margin at the bottom of the title DIVs.

div.hidden {
	margin: -3px 0;
	padding: 5px;
	border: solid 1px #000;
	display: none;
}

Step 2: Make Your XHTML

With the styles ready to go, we can now begin making the dynamic content itself.

Again, each item on the page will be controlled by two DIVs: A headline / link DIV that, once clicked, will display the content DIV; and a content DIV, assigned to initially be hidden, that can contain any old HTML you want.

The title DIV must contain an onclick call to a JavaScript function, toggleDisplay(). That function will take as an argument the ID value of the title’s associated content DIV.

The content DIV must have the same ID that you use as an argument for the toggleDisplay() function. In other words, if you have a title DIV and it calls toggleDisplay(‘mydiv’), then the content DIV that you want to dynamically display must have an ID value of mydiv.

So, for each item we want to display, we need a code block like this:

<div lang="menu" onclick="toggleDisplay('c1');">Title DIV</div>
<div id="c1" lang="hidden">Content DIV</div>

Step 3: Add Content To The Content DIVs

Again, you can add any HTML you want inside the DIVs.

However, setting the display style of a DIV to none, which I’ll demonstrate how to do shortly, will not prevent script, either server-side or client-side, from executing, so keep that in mind. For example, if you have this code:

<div lang="menu" onclick="toggleDisplay('c1');">Title DIV</div>
<div id="c1" lang="hidden">
<script type="text/javascript">
window.onload = alert("Hello World!");
</script>
<?php
echo "Hello World"; 
die('This is a PHP order to halt all further page execution');
?>
</div>

Then, the first time you visit the page, “Hello World!” would pop up in an alert box, and “Hello World” would be hidden from view, inside the DIV. But all content on the page following that would be left out, too, because you ordered the page to die.

Again, hiding a DIV does not remove or alter its content in any way, it just tells the Web browser to not show any HTML inside the DIV. Keep that in mind.

Step 4: Write The JavaScript Function

Last, we write the JavaScript function to handle the title DIV onclick events. The script is about as simple as it gets when it comes to DOM manipulation:

• We get, from the argument passed to the script, the content DIV we want to display or hide.
• We figure out if that DIV is currently being shown.
  • If it is being shown (that is, has a display property of “block”), then we set the display property to “none” (hide it).
  • If the DIV is hidden, we set its display property to “block”, which makes it appear.

Yes, it’s just as simple as toggling a property based on the property’s current value.

function toggleDisplay(itemId) {
	var activeItem = document.getElementById(itemId);
	if(activeItem.style.display == "block") {
		activeItem.style.display = "none";
	}
	else {
		activeItem.style.display = "block";
	}
}

You can see this script in action here:

http://www.dougv.com/demo/js_dynamic_display/

You can save the file to your computer if you want to hack it. As always, I distribute all code under the latest version of the Creative Commons Attribution / Share-Alike License.