Show/hide ANYTHING
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)
January 16th, 2003 at 10:14 pm
yay! i’ve been wanting a script for that for awhile now, to clean up my messy sidebar
i just have one question before i go ahead and implement it:
if i use this script on the page with my weblog, will this interfere in any way with the expanding/collapsing extended entries script that i’m already using? i don’t really see any reason why it should, but i wanted to double check before i started installing anything
thanks so much!
January 16th, 2003 at 11:38 pm
You totally rock! I can’t believe how easy this was to implement. I come to this site every day and grab scripts all the time. But I seriously doubted this one would work for me because I use so many nested messy tables on my site. I swear to god I was able to get this script running in 4 minutes. 4 freakin minutes! Dear God, you rule. Thank you. Please keep up the good work.
January 17th, 2003 at 12:41 am
one last question, and feel free to disregard the first question, because it doesn’t affect the other script.
since i use skins, i’m using includes for just about everything on my site, including the sidebar where i’m using the expand/collapse script. it opens fine, but when it closes, it closes to my nav.php file, which is included into the main template. is there any workaround so that when the section collapses, it will go back to index.php, rather than the included file? i think that it has something to do with <? echo $PHP_SELF ?> but i don’t know enough of php to figure out how to get around that…
January 17th, 2003 at 5:08 am
javascript e-learning code examples
January 17th, 2003 at 9:08 am
Ahh… ok. Very interesting. Yeah, it’s because of that PHP_SELF thingy. I need to find some other way of getting the current URL. Should be easy… just need the time to look for the right one…
January 17th, 2003 at 1:37 pm
First off — Thank you! This script solves a problem I’ve been having for a while now.
Question, though (of course….):
The ’show’ links look (and act) like they’re set up to refresh the page only if the JavaScript won’t work; otherwise they just automagically show the hidden area. The ‘hide’ links, however, refresh the page no matter what — I think it’s the ‘return=true’ vs. ‘return=false’. Is there a reason why the ‘hide’ scripts have to refresh the page, rather than just peforming their automagic hide effect? Would switching the code there to ‘return=false’ break things?
I’d try myself, but the last time I tried mucking with one of the scripts I got from here, I broke it, leading to the problem I mentioned above. Oops!
January 17th, 2003 at 3:36 pm
I’ll try that on the demo. (I’m going to try and play some more with it this weekend - since the PHP_SELF thing seems to be causing a problem as well…
January 17th, 2003 at 5:16 pm
Michael,
I noticed the refresh problem in the hide function as well. I tried your “return false” suggestion, and it worked. I have only tested on IE 6 on PC (I’m at work) so I don’t know how well it will work elsewhere. But, at least everything didn’t blow up. Try it and let us know which browsers it worked or didn’t work on. Thanks again Jennifer!
January 17th, 2003 at 9:48 pm
OK, changed the “return false” in the code in the post. I also tried just using “#” instead of PHP_SELF - it seems to work in the demo - let me know if anyone sees any problems.
January 17th, 2003 at 11:34 pm
works like a charm! thanks!
January 18th, 2003 at 1:25 am
After switching the ‘hide’ section to return=false —
Works as JavaScript: IE 5 and 6 (PC), IE 5 (Mac), Mozilla/Netscape/Chimera (Mac & PC), Safari (Mac)
Works as page refresh: Opera (PC), OmniWeb (Mac)
Looks good! Thanks again for the script, this solved me no end of headaches!
January 18th, 2003 at 3:25 am
I’ve also managed to get the hide/show smileys function when leaving comments working, thanks to a new Scriptygoddess script (that I even helped debug — go me!), and I think (though feel free to correct me on this) that I’ve got the ‘Remember Me’…
January 19th, 2003 at 12:18 am
I am having MAJOR problems getting this to work with Mozilla… am I missing something?? I’m so frustrated and half the readers of the site I’m administering can’t read the menu! *argh*
January 19th, 2003 at 6:54 am
Without more information - or in the least a URL - I can’t even begin to guess what you could be doing.
January 20th, 2003 at 12:54 am
One caveat for the newbie/weekend warrior: never use a script unless you’re fairly certain that you understand how it works.
January 20th, 2003 at 3:03 am
I’ve been kind of quiet today, but I feel like I’ve got a lot of stuff accomplished. I went through
January 20th, 2003 at 1:25 pm
lovely script !! thanks
January 20th, 2003 at 4:14 pm
What a great idea! Finally I have a way to add new things to my sidebar without having to worry that it’s getting longer than the actual blog.
January 21st, 2003 at 12:38 am
Thanks to a wonderful article at Scriptygoddess, the archives are now doing a hide and seek thingy. Go Look. I
January 21st, 2003 at 12:43 am
IT WORKS!! thanks to a bit of patience from Bluewolf, this script from the Scriptygoddess now works to show/hide my
January 25th, 2003 at 9:37 am
What if a user doesn’t have javascript enabled? I just installed this on a test page and then turned javascript off. If I click on the link, nothing happens.
Could someone suggest an alternate script (php only, perhaps?) or a change to this one?
Thanks!
January 25th, 2003 at 3:13 pm
Yeah, the script above is entirely based on javascript. The nice thing about that, is that the page doesn’t have to reload to display the “hidden” part. You could do something *like* it with php, but the page would have to be reloaded…
If that doesn’t scare you away then here you go:
Put this somewhere in the head tags - or above all the stuff you’re going to hide/show:
<?
$i=100;
if (!isset($showit)) {
$showit = 0;
}
?>
Then use this block of code for your show/hide stuff:
<a name=”<? echo $i ?>”></a>
<? if ($showit == $i) { ?>
<p><a href=”<? echo $PHP_SELF; ?>#<? echo $i; ?>”>Hide the money</a></p>
<p>TEXT YOU WANT TO HIDE HERE</p>
<p><a href=”<? echo $PHP_SELF; ?>#<? echo $i; ?>”>Hide the money</a></p>
<? } else { ?>
<p><a href=”<? echo $PHP_SELF; ?>?showit=<? echo $i ?>#<? echo $i; ?>”>Show me the money</a></p>
<? } ?>
<? $i++; ?>
I have a demo of that running here.
January 26th, 2003 at 9:26 pm
I couldn’t get the collapsing archives script to work so I tried this one instead. Yay! It works! Is there nothing that Scripty Goddess can’t do? You all rock! Thanks so much for you hard work!
January 26th, 2003 at 9:39 pm
I did a few tweaks around the site tonight. I added the last 50 keyword referrers script to the stats
February 23rd, 2003 at 10:33 pm
If you want to use this script without php - it will take a bit of editing but here’s the basic template… Still take the firt part (the javascript that goes into your head tag…) - then use this for your “show/hide boxes”:
<span id=”click123″><a href=”#” onclick=”showMoreAnything(123,’#');return false;”>
<!– The below is displayed when the box is closed –>
<b>SHOW ME THE MONEY!</b>
<!– —- –>
</a><br /></span>
<div id=”hide123″ style=”display: none”>
<!– The below is displayed when the box is open –>
HERE”S THE MONEY!!!<br>
<a href=”#” onclick=”showMoreAnything(123,0);return false;”>
<b>TAKE AWAY THE MONEY</b>
</a><br />
<!– —- –>
</div>
Anywhere you see “123″ - that will need to be a unique number each time you display the box. (Including the “click123″, and “hide123″ - you need to change the “123″ part of that…)
Also - be aware that someone that doesn’t have javascript enabled - not sure how this will display on their browser.
February 23rd, 2003 at 10:47 pm
Oh, one extra note to my comment above: the javascript that you’re putting in between the <head> </head> tags… just take off the bottom lines which are PHP:
<?
$layernum = 100;
?>
March 5th, 2003 at 5:35 pm
This is beautiful. I was wondering if the Shown/Hidden status could be cookied so user returns to state they left it at? Cookies baffle me and I wouldn’t know where to start.
Thanks much!
ps: I’m using the one you posted on Jan 26th that doesn’t have PHP.
-B
March 6th, 2003 at 5:18 pm
you guys rock. over and over and over and over again. this works like a charm! thanks!
March 30th, 2003 at 11:30 am
I’m not the first to do this, but it’s about time I implemented something like it on my site… all the cool kids are doing it. Scriptygoddess has instructions to have collapsible bits of whatever you’d like in your page….
April 11th, 2003 at 11:45 pm
My goodness, that is wonderful! Wonderful! I am now trying to figure out every possible way to use it because it does so much to clean up my page. Thank you.
April 12th, 2003 at 6:56 am
Well, as mentioned, I’ve been tinkering around the Snakepit. It keeps me amused. Truth is, it was quite fun but a lot more work than I expected. I installed a rotating title bar, an idea that I picked up from Joni Electric, who always has the most cool…
April 19th, 2003 at 11:45 pm
Is there a way to put more than one instance of this on a page? I’m trying to use it on a links page, with different categories of links — one expand/collapse section per category. However, my second category (”pagan”) seems to be nesting inside of the first!
I’ve tried duplicating the javascript and renaming the function (”showMoreAnything1″), but that doesn’t seem to be doing the trick.
Any help gratefully appreciated!
April 19th, 2003 at 11:47 pm
Oops…my
http://www.metrocake.com/links.htm
April 20th, 2003 at 1:46 am
I have several instances of it on my page without problem. Feel free to look at the source code. (I use it on both the left and right sidebars.)
April 21st, 2003 at 9:24 pm
Howdy…
I was wondering if there is a way to keep the year from showing on one time events… it’s showing up kinda wierd (the 2003’s follow the hyperlinked text, but are placed at the end of the list of dates)
thanks
thatbaldguy
April 30th, 2003 at 9:02 pm
is there any way to make it php if javascript is disabled, but go ahead and use javascript if it is (since it’s much nicer, no reload)? I believe this would be a “solve-all” solution… For those that don’t know, the reason php has to reload is because it is server side and javascript is not (it’s client side)… just in case some people didn’t know!
April 30th, 2003 at 11:36 pm
i got it working on a test page on my site .. anywho, how do you change the default from hidden to showing?
May 1st, 2003 at 12:41 am
nevermind
i got it working… duh, you just reverse what you want opened to what’s closed and vice versa. hmm, now i can’t decide which i like better, default all open or all closed?!? :p
June 10th, 2003 at 3:02 pm
Can you do this with ASP code instead of PHP?
August 5th, 2003 at 12:28 pm
i can’t seem to get this to work in netscape when javascript is not enabled. i’m testing it on this page:
http://lynnewiora.com/design/tests/collapse.html
anyone else had this problem?
August 5th, 2003 at 1:11 pm
It will NOT work without javascript. It is completely javascript dependent.
August 20th, 2003 at 12:20 am
OK, well, I’ve sat here and played some more. Most of the evening, in fact, in between bouts of “being a mom”. Actively, that is. Being a mom, actively, specifically. Anyway, my point is that I’ve been sitting here attempting…
August 24th, 2003 at 3:12 pm
How can I change it to show Items by default, not have them hidden?
August 28th, 2003 at 1:55 pm
Hi, I need to know how keep all the time the URL adrees, i dont wanna show the names of the pages in any site, who i can do it.
Example:
http://www.address.com and if in this page theres a link to other page like downloads, when i made click over the link the page downloads should be keep only de http://www.address.com
Thanks for the support
August 30th, 2003 at 8:46 pm
I’ve been looking into scripts and plugins that are provided for MT, and I noticed that most people prefer working with php. Now the wonderful thing about MT is that you can choose your extensions, and my first choice was…
September 4th, 2003 at 1:23 am
I just wanted one central place where I could record all the little doodads that make this site tick. Plugins MT Paginate MT Entry If Comments Global Listings MT Other Blog Smarty Pants Simple Comments Archive Date Header Word Count…
September 27th, 2003 at 8:25 am
Thanks so much this script rocks !!!!
October 20th, 2003 at 12:45 pm
Site redesign time again, folks. This usually means that mid-terms are over and I have some procrastinating time to kill. I changed the table widths to percentages again, just ’cause I really do like seeing the whole site on a…
January 2nd, 2004 at 11:43 am
This script was extremely easy to add! Thank you!
February 22nd, 2004 at 4:06 pm
Show/Hide anything…
February 23rd, 2004 at 1:32 am
hey, thanks so much for this code!! It’s been forever since you posted it but I just wanted to thank you because it’s going to help me so much! xoxo
April 8th, 2004 at 11:50 pm
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…
April 9th, 2004 at 12:36 am
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…
July 2nd, 2004 at 8:47 am
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)
August 18th, 2004 at 9:01 am
Great script ! Thanks
December 25th, 2004 at 4:26 pm
When I try to do this, I always get an error message that says:
Tag is broken:
December 25th, 2004 at 4:27 pm
Tag is broken: < di v id="hide
May 20th, 2005 at 8:01 pm
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?
scriptygoddess is proudly powered by WordPress
Entries (RSS) and Comments (RSS).