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.


+/- Click Here to Expand and Collapse (demo is currently unavailable)

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}
<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://theblogwidgets.com/2008/09/translate-blog-widget-using-flags.html”>Blog Translation Plugin</a></li><li><a href=”http://theblogwidgets.com/2008/09/performancing-ads-make-money-blog-widget.html”>Make Money Widget</a></li></ul>

Like Us on Facebook?

  • http://mesothelioma-help-doctors.blogspot.com/ Mesothelioma Helper

    John, this is really great because now I can fit more stuff on my sidebars. I prefer using this over you drop down menu.

  • http://www.widgetblogger.co.cc/ widgetblogger.co.cc

    thanx so much<br />would use ut soon on my blog

  • http://valashiya.blogspot.com/ Helen

    Thanks for this tip, I will definitely use it in my next pet project :)

  • http://jroller.com/evans Evans

    Wow, you&#39;re a genius – nice tip that deserves to be bookmarked.<br /><br />I will link to it from my blog.<br />Thanks for sharing :)

  • http://www.blogger.com/profile/00848854358592890125 Vicky

    That&#39;s a great post! btw do you have any idea if I were to use it more than one in a page? Thanks..

  • http://www.blogger.com/profile/08800279997931808628 John Smith

    <b>Vicky</b>, Vicky if you were to use this <b>Hide Show DIV</b> element more than once you need to make sure to give each element a unique name (as described in the red text in the post).

  • http://fiveholiday55.blogspot.com/ Evans

    This is one nice tip for adding valued interactivity to one&#39;s site. It will definitely be on show on my blog.<br /><br />Thanks for sharing :)

  • Anonymous

    Thanx for this. I want to use this expand hide <br />feature to hide and show some pics and then link those pics to some other pages. <br /><br />my question is if i do that for like 10 pictures do i have to repeat this code for each button? will it make the page slow? pls HELP anyone??

  • http://www.blogger.com/profile/01417779980855907440 Kaixi

    Cool, I&#39;m not really into Javascript, so that was a great tip for me.

  • http://www.blogger.com/profile/18403927443949344469 cryoffalcon

    Hi to expand this you have to click on it, can you make a automatic opening one, i have seen it on sites, and one more thing i want to use it for the labels in sidebar, can you give me the code how to use this gadget there.<br />Thanks for reading.<br />Regards<br />Shah Faisal

  • http://www.blogger.com/profile/02270853379597499663 swEet zirCon

    I can&#39;t find the exact tag to be replace with the new one. Is there any different tag? Please let me know coz i&#39;m not familiar with the html code. TQ

  • http://www.blogger.com/profile/10927325560356392248 Ajin Jude

    Hi, Can you tell me how I can make this expand and collapse on hover rather than click?

  • http://www.blogger.com/profile/11130450158010518112 fazrul arhan

    This is great! i&#39;m using this tweak now on one of my blogs..it&#39;s reduced space..i always like this tweak since i play friendster last time,haha..thank u so much John!!

  • http://www.friuliveneziagiulia.info/ ferux

    Thanks so much. It was helpful

  • http://no-illusions.nl/ Peter Boomsma

    I&#39;ve been looking for a method to just show one div at the time. I want to have multiple popup divs, but only one at the time. <br /><br />So if you have 3 links,<br />link1<br />link2<br />link3<br /><br />They all open a different div but i want to close the div of link1 when a viewer clicks on link 2. So he does not have to close link1 before openening link 2.<br /><br />Anyone?

  • http://www.blogger.com/profile/03847520323975263297 Khmer Spy

    Thx a lot for this. M using it here: http://kh-spy.blogspot.com/

  • http://pc-dreams.blogspot.com/ IsHu

    will this concept work under post ??

  • http://www.blogger.com/profile/03716062391908009467 Twitter Buzz

    <b>Auto Tweet Generator Software!</b><br /><br /><a href="http://www.twitterbuzz.in/&quot; rel="nofollow"><b>Autopilot Twitter Marketing Just Through <i>One Software</i>!</b></a><br /><br /><i>Tweeting When You&#39;re Away From Your Computer Has Never Been Easier!</i><br /><br /><a href="http://www.twitterbuzz.in/&quot; rel="nofollow"><b>&quot;Discover How This Twitter Schedule Tweets For You On Autopilot

  • http://www.blogger.com/profile/12787009152906960326 Defensive Pro

    can v make it expand by default?

  • Anonymous

    i want to display more less option using javascript div container doesn&#39;t contain any data means more option is automatically disappear

  • Anonymous

    i want to set more/less option using javascript using usercontrol and div container. more option automatically disappear while at the time of div container empty

  • http://www.blogger.com/profile/01173019524783723568 Bragadeesh

    Cool stuff!

  • http://www.blogger.com/profile/00716047628204372607 movies
  • http://www.blogger.com/profile/15420661724706004370 Igor Sousa

    This comment has been removed by the author.

  • Anonymous

    Thank you..i save lots of time

  • http://www.blogger.com/profile/05649193201488864000 2t@

    tanks i use it in my blog http://www.templates2day.blogspot.com

  • http://www.blogger.com/profile/00303888404713862153 javieth

    JavaScript is a good program and very easy to use. I don´t like a complex program. I prefer javascript because i consider it like a device very eficient and it have a good quality. <br />I always looking for the quality that is why i prefer to <a href="http://www.buyonline-rx.com/&quot; title="buy viagra" rel="nofollow">buy viagra</a> because i always have a great result in my sexual life.

  • http://www.stellarinfo.com/download.htm hard drive recovery

    very good post and very new information for me. I must try this thing on my blog <a href="http://hard–driverecovery.blogspot.com/&quot; rel="nofollow"> hard drive recovery</a> blog

  • http://www.ankarasrc.com/ Ankara Src

    its fantastic post about this.thank you very much.

  • http://www.sistemliyiz.biz/ ISO 9001

    thank u very much for this comment.

  • http://www.sistemliyiz.biz/ ISO 9001

    thank u very much for this comment.

  • http://www.duygugelinlik.net/ Gelinlik

    perfect share for widget.

  • http://www.harvestturkey.com/ Harvest Türkiye

    thank you very much for your share.

  • http://www.harvestturkey.com/ Rejeneratif Tıp

    thank you very much for your share…

  • http://www.antalyaarabakiralama.cc/ Antalya Araba Kiralama

    Thank you very much,perfect

  • http://www.duygugelinlik.net/ Gelinlik

    <a href="http://www.duygugelinlik.net&quot; rel="nofollow">Gelinlik</a>

  • http://www.harvestturkey.com/ Platelet Rich Plazma

    http://www.harvestturkey.com thank you very much

  • http://www.harvestturkey.com/ Kök Hücre

    <a href="http://www.harvestturkey.com&quot; rel="nofollow">Platelet Rich Plazma</a> thank you very much

  • http://sawah-egy.blogspot.com/ Sawah Egy
  • http://www.vefatilani.pro/ Vefat ilanı

    widget.Thank you very much

  • http://www.blogger.com/profile/15672834849423912134 maybornstar

    Not working in Firefox 3.6.17

  • http://www.academia-research.com/ essay jobs

    thanks a lot))) very helpful post! appreciate it)

  • http://toptermpapers.net/ term paper writing service

    very iteresting psot! thanks a lot

  • http://www.duygugelinlik.net/ gelinlik

    wonderful.this is very interesting.Thank you very much for this post

  • Anonymous

    demo doesn&#39;t work!<br />not in IE9 or Chrome

  • http://essaysmonster.com/examples essay example

    Thanks for sharing such an interesting information. I think this is really a very nice post. Thanks for the great content!

  • http://essaysmonster.com/buy-essay buy essay online

    Thanks for the article. Very interesting.

  • Anonymous
  • http://www.e-termpapers.com/order/ order research paper writing

    Thanks for giving article, the guide line you provided about how to add css and java script in our blog was superb, its bit difficult to understand in one time but i am trying to learn.

  • http://www.blogger.com/profile/18142593665035519514 Matt Muji

    thanks for sharing.. <br /><br /><a href="http://giriblogs.blogspot.com/2012/01/berbagai-cara-eksis-dengan-internet.html&quot; rel="nofollow">eksis dengan internet</a>

  • http://www.e-termpapers.com/termpapers/essays.html college book reports

    thanks for providing so many things related to java script i enjoyed allot while reading this article, there are so many ideas hidden in this article.

  • http://www.localseoinc.com/ Local SEO

    Nice post. I was checking continuously this site and I&#39;m impressed! Extremely useful info specifically the last part I care for such info much. I was looking for this specific info for a long time. Thanks and best of luck.<a href="http://www.localseoinc.com/&quot; rel="nofollow">Local SEO</a>

  • http://ilaclamatr.wordpress.com/ ilaclamatr

    Thank you very useful information<a href="http://www.acililaclama.com&quot; rel="nofollow">Acil İlaçlama</a>

  • http://www.gelinlikankara.info/ Gelinlik Ankara

    Thx for very useful info<br /><br /><a title="beyaz butik ankara" href="http://www.gelinlikankara.info/moe-by-beyaz-butik-ankara.php&quot; rel="nofollow">Beyaz Butik Ankara</a>