If you want to hide and display stuff in your sidebars, or anywhere on your website, you can do it with hidden divisions and JavaScript. Today, I'd like to pass on some JavaScript code I'm actually using on this blog.

Hide and Display

At any given time, there is bound to be some clutter on your website, usually in a sidebar, you'd actually like to hide until someone needs it for a specific purpose. An example is the feed subscriber count in my left sidebar. It looks like a single line block of text. In reality, it's a complete widget with the lower part hidden. When someone clicks on that line, with a JavaScript enabled browser, the rest of the widget appears until that line is clicked again. On the second click, the lower part of the widget is once again hidden.

You may wonder why I would hide part of that widget in the first place. Well, quite simply, it allows more of the sidebar to appear until that widget is actually used. In this particular case, there are multiple ways for people to subscribe to feeds on my blog and this is just one of them.

I could probably add more text items to either sidebar, to be displayed and hidden at will, which wouldn't slow the page down enough to make a difference. Of course, that would only apply as long as the items wouldn't require more database queries, PHP statements, or HTTP connections.

The technique can actually be used for any part of a website, but you have to take the non-JavaScript using visitors into consideration because it won't do a thing for them.

The Code

I obtained the original code for "Quick 'N Easy Layer Show/Hide" from WillMaster Software and adapted it for my widget. Here's my widget code, including the JavaScript (with some comments and minor changes):


<div class="wp-widget-title">
<script type="text/javascript" language="JavaScript"><!--
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
<!-- start widget title -->
// The "a style" is used to override the main CSS color for anchor text. "RSSO" is what I use for the new CSS division ID.
<a style="color:#2e8b57;" href="javascript:ReverseDisplay('RSSO')" title="Click to Expand and Collapse"><img src="path to feed icon" height="16" width="16" style="margin-bottom:-2px;" alt="" /> <?php echo file_get_contents('path to feedcount');?> Subscribers [+]</a>
</div>
<!– end widget title –>
<!– start hidden widget text –>
<div id="RSSO" style="display:none;">
<ul>
<li><a href="http://feeds.feedburner.com/UntwistedVortex" rel="nofollow" title="Full Article Feed" target="_blank">Full Article Feed</a></li>
<li><a href="http://feeds.feedburner.com/untwistedvortex/summary" rel="nofollow" title="Summary Article Feed" target="_blank">Summary Article Feed</a></li>
<li><a href="http://feeds.feedburner.com/CommentsForUntwistedVortex" rel="nofollow" title="Comments Feed" target="_blank">Comments Feed</a></li>
<li><a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=668914&loc=en_US" rel="nofollow" title="Full Articles by Email" target="_blank">Full Articles by Email</a></li>
<li><a href="http://podcasts.odiogo.com/untwisted-vortex/podcasts-html.php" rel="nofollow" title="Odiogo Audio Feed" target="_blank">Odiogo Audio Feed</a></li>
</ul>
</div>
<!– end hidden widget text –>


Your Ideas

Okay, I've shown you what I've done with the JavaScript. I may end up using something similar in other places.

If you have other hide and display ideas, feel free to share them.

(Update: Edited to include the title attribute in the anchor for "Click to Expand and Collapse" (as a kind of tool tip) as well as "[+]" next to "Subscribers".)

(Update 2: I'm not using it for the subscriber box anymore. Look at the "Standard Search" in the lower right sidebar.)