You see it everywhere these days – little link that says “Show more…” and when you click it a new block of content appears. There are a million uses for this show/hide technique – I know because I have used it in a dozen different ways myself. Here is the simplest CSS and JavaScript method I have found:

JavaScript in header:

function showDiv(ID) {
if (document.getElementById(“div” + ID).className == “show”)
document.getElementById(“div” + ID).className = “hide”;
else
document.getElementById(“div” + ID).className = “show”;
return true;
}

Link to open hidden content:

<span class=”norm” onclick=”showDiv(0)”>Read more…</span>

Hidden content container:

<div id=”div0″ style=”display:none;”>Content here</div>

This entry was posted on Monday, July 14th, 2008 at 3:46 pm and is filed under CSS, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.