Hide Show DIV Content with Links by using Javascript

Hide Show DIV Content with Links by using Javascript

The Hide and Show DIV elements for HTML content is a great way to clean up your sidebar. It becomes especially handy for those long blogroll lists or anything that clutters up the blog. Just simply click a link to make all the hidden content magically appear and disappear.

Demo:

+/- Click Here to Expand and Collapse

• HowHero Tutorials
• Blog Translation Plugin
• Make Money Widget

How to use it in Your Blog

Step 1: Adding CSS and Javascript
First, add this code below directly above the </head> tag.

<style type="text/css">
.commenthidden {display:none}
.commentshown {display:inline}
</style>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Step 2: Adding the Active Content to be Displayed
Place this code wherever you would like it to appear. Make sure to change the red text to a name that is "unique" to any other name in your template. An example might be "blogroll-dropdown". If you do not give each Hide Show DIV element a unique name the script cannot be used more than once on the same page. The green text is the title of the link that you click on to make the content appear. Replace the code "Expanded Content" with the content you wish to have expand and collapse.

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Link Title</a><br />
<div class="commenthidden" id="UniqueName"
>Expanded Content</div>

Step 3: Sample Code
Here is what my code looks like for the demo above:

<a aiotitle="" href="javascript:togglecomments('hideshowdemo')">+/- Click Here to Expand and Collapse</a>
<div class="commenthidden" id="hideshowdemo"><ul><li><a href="http://howhero.com/">HowHero Tutorials</a></li><li><a href="http://widgetsforfree.blogspot.com/2008/09/translate-blog-widget-using-flags.html">Blog Translation Plugin</a></li><li><a href="http://widgetsforfree.blogspot.com/2008/09/make-money-blog-widget-performancing.html">Make Money Widget</a></li></ul>
</div>

Posted in: Blogger Widgets