scriptygoddessI just love that show hide javascript. Kymberlie asked if it could be reworked so that you could use it with ANYTHING (not just entries, archives, and categories, etc.)
So this script (should) work with anything. It's not blog-program dependent… it's completely stand-alone. There were some funky things going on with it, but I think I got some workarounds that seem to do the job. I haven't tested it thorougly and there may be a better way to do some of this (if you have some thoughts – please share in the comments). Again, I mixed some PHP in there (really just to make things easier, so there wasn't so much hardcoding) – but if you're not running PHP, and don't mind hardcoding a few things, I can write up a version for you).
(Code is in the "more" section)
If you have a lot of these show hide's, you're probably not going to appreciate another one. You could technically use one of the ones before – but not knowing which ones people had, I just created a new one. (sorry)
So, this part goes between your <head> </head> tags:
<script language="javascript">
function showMoreAnything(blocknum, isOpen) {
hid = ('hide' + (blocknum));
unhid = ('click' + (blocknum));
if( document.getElementById ) {
if( document.getElementById(hid).style.display ) {
if( isOpen != 0 ) {
document.getElementById(hid).style.display = "block";
document.getElementById(unhid).style.display = "none";
} else {
document.getElementById(hid).style.display = "none";
document.getElementById(unhid).style.display = "block";
}
} else {
location.href = isOpen;
return true;
}
} else {
location.href = isOpen;
return true;
}
}
</script>
<?
$layernum = 100;
?>
And here's the piece that does the show hide more… I've commented all over the place so you can see what is and isn't editable (well, technically it's all editable 
but just trying to make it easier for you so you're less likely to break it)
<!– …. do not change the line below … –>
<?
$layernum++;
if (!isset($jsenabled)) {
?>
<span id="click<? echo $layernum; ?>"><a href="#?jsenabled=no" onclick="showMoreAnything(<? echo $layernum; ?>,'#?jsenabled=no');return false;">
<!– … do not change the line above … –>
<b>SHOW ME THE MONEY!</b>
<!– …. do not change the line below … –>
</a><br /></span>
<? } ?>
<!– … do not change the line above … –>
<!– Above is layer that is shown when not open –>
<!– if users click on the link and it doesn't work – the page will be refreshed with the block below showing –>
<!– Below is layer that is shown when open –>
<!– …. do not change the line below … –>
<div id="hide<? echo $layernum; ?>" <? if (!isset($jsenabled)) { ?> style="display: none" <? } ?>>
<!– … do not change above (can customize the line below) … –>
HERE"S THE MONEY!!!<br>
<!– … do not change the line below … –>
<!– you can also copy this block (look for the next ******) and duplicate it ABOVE the text you're hiding… that way people don't have to scroll to "close" the block –>
<a href="#" onclick="showMoreAnything(<? echo $layernum; ?>,0);return false;">
<!– … do not change the line above … –>
<b>TAKE AWAY THE MONEY</b>
<!– …. do not change the lines below … –>
</a><br />
<!– ******* if duplicating copy to here and copy and paste above the text you're hiding to allow for another link to close the block –>
</div>
<br>
<!– … do not change the lines above … –>
Demo is here.
Just a side note here: If you're a little braver, there's a "gadget" script on this site which will let people show/hide and even MOVE blocks around. A cookie gets saved for them so their settings are remembered for the next time they visit. It's not an easy script to implement, but like I said, if you're feeling adventerous, it's much more robust than this one. 
(That gadget script is the one I'm actually using on this site for the side bar)
(Update: I've fixed some of the code above based on some of the comments below. This still hasn't been widely tested. Try the "demo" and let me know if doesn't work with a standard browser)
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
