Wednesday, July 16, 2008

Hide and show contents of a div

One of the websites that I am maintaining during my dayjob was getting quiet cluttered on the right side. So I decided that all the logo's of possible banks should be hidden untill clicked on. I know this is possible, I just didn't know the right code from the top of my head.

However, Dustin Diaz's blog gave me the solution after a quick Google.

This resulted in the following code:

<script type="text/javascript">
function switchDiv(obj)
{
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else
{
el.style.display = '';
}
}
</script>
<div id="whatever" style="margin-bottom:2px;"><a onclick="switchDiv('nameofdivtoshowandhide');"><img src="imageonwebsite" </a></div>
<div id="nameofdivtoshowandhide" style="margin-bottom:2px; display: none;"><img src="imagewithalllogos.jpg" </div>


This is definitely repeatable code, which I should save for future use.