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 CollapseHow to use it in Your Blog
Step 1: Adding CSS and JavascriptFirst, 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>
Tags: BLOGGER TIPS
Previous Article
Subscribe to:
Post Comments (Atom)
Share your views...
2 Respones to "Hide Show DIV Content with Links by using Javascript"
Acting deals with very delicate emotions. It is not putting up a mask. Each time an actor acts he does not hide; he exposes himself. See the link below for more info.
#hide
www.ufgop.org
17 April 2015 at 20:23
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. how to check my paper for plagiarism
20 July 2015 at 23:24
Post a Comment