Archive for July 14th, 2008

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>

Comments Comments Off on Show/Hide Content using CSS and JavaScript