scriptygoddess

16 Jan, 2003

Show/hide ANYTHING

Posted by: Jennifer In: Scripts

I 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)

58 Responses to "Show/hide ANYTHING"

1 | The Logue: Clipping

February 22nd, 2004 at 4:06 pm

Avatar

Show/Hide anything
Show/Hide anything…

2 | Hey! ...

April 8th, 2004 at 11:50 pm

Avatar

Distractable today
Been playing around while watching Survivor tonight. I've been attempting to smooth out the kinks in the newly-implemented show-hide anything script for my sidebar on…

3 | Hey! ...

April 9th, 2004 at 12:36 am

Avatar

Distractable today
Been playing around while watching Survivor tonight. I've been attempting to smooth out the kinks in the newly-implemented show-hide anything script for my sidebar on…

4 | moods

July 2nd, 2004 at 8:47 am

Avatar

That was great! Thank yuo very much!
Look at the result in space saving on my slim blog :-)

I modified te code to fit wordpress architecture, the code is available if you like it. Just send me an email.

Thank you again
Simone (Italy)

5 | borgo

August 18th, 2004 at 9:01 am

Avatar

Great script ! Thanks 😉

6 | lsob

December 25th, 2004 at 4:26 pm

Avatar

When I try to do this, I always get an error message that says:

Tag is broken:

7 | lsob

December 25th, 2004 at 4:27 pm

Avatar

Tag is broken: < di v id="hide

8 | cw

May 20th, 2005 at 8:01 pm

Avatar

I've been using this script on my sidebar for a while, but I would love to be able to have a couple of the show/hide menus to be showing/expanded as the default. How do I go about doing that?

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements