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>
Share!
Enjoy the article so far? Recommend it to your friends and peers.
Subscribe! (free)
Be the first to our articles and get latest updates on freebies.
51 comments:
John, this is really great because now I can fit more stuff on my sidebars. I prefer using this over you drop down menu.
thanx so much
would use ut soon on my blog
Thanks for this tip, I will definitely use it in my next pet project :)
Wow, you're a genius - nice tip that deserves to be bookmarked.
I will link to it from my blog.
Thanks for sharing :)
That's a great post! btw do you have any idea if I were to use it more than one in a page? Thanks..
Vicky, Vicky if you were to use this Hide Show DIV 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).
This is one nice tip for adding valued interactivity to one's site. It will definitely be on show on my blog.
Thanks for sharing :)
Thanx for this. I want to use this expand hide
feature to hide and show some pics and then link those pics to some other pages.
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??
Cool, I'm not really into Javascript, so that was a great tip for me.
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.
Thanks for reading.
Regards
Shah Faisal
I can't find the exact tag to be replace with the new one. Is there any different tag? Please let me know coz i'm not familiar with the html code. TQ
Hi, Can you tell me how I can make this expand and collapse on hover rather than click?
This is great! i'm using this tweak now on one of my blogs..it's reduced space..i always like this tweak since i play friendster last time,haha..thank u so much John!!
Thanks so much. It was helpful
I'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.
So if you have 3 links,
link1
link2
link3
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.
Anyone?
Thx a lot for this. M using it here: http://kh-spy.blogspot.com/
will this concept work under post ??
Auto Tweet Generator Software!
Autopilot Twitter Marketing Just Through One Software!
Tweeting When You're Away From Your Computer Has Never Been Easier!
"Discover How This Twitter Schedule Tweets For You On Autopilot Mode"
Sit Back And Relax And Give Your Twitter Followers Valuable Content
While You're Away.... That'll Turn Them Into Raving Fans..
-> Manage your Twitter postings and schedule multiple posts in just seconds easily!
-> Set the time, edit and import messages in just a few clicks of a button!
-> Think about the time saved on making changes without having to log into Twitter!
-> Twitter marketing made easy because you can track your tweets through one software!
-> Gain rapid exposure through Twitter without having to physically be involved in tweeting all day!
-> It automatically submits your messages to Twitter while you focus on more pressing matters!
If You Can Click, Copy, and Paste, You Can Use "TwitterBuzz Auto Tweet Generator!
So go ahead! and Click Here to Download Your Software immediately...
Auto Tweeter Bot
Tweet Automator
Automated Twitter Tool
An Automated Tweeting Solution
Automatic Tweet
can v make it expand by default?
i want to display more less option using javascript div container doesn't contain any data means more option is automatically disappear
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
Cool stuff!
THANK U http://movsshare.blogspot.com/
Thank you..i save lots of time
tanks i use it in my blog www.templates2day.blogspot.com
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.
I always looking for the quality that is why i prefer to buy viagra because i always have a great result in my sexual life.
very good post and very new information for me. I must try this thing on my blog hard drive recovery blog
its fantastic post about this.thank you very much.
thank u very much for this comment.
thank u very much for this comment.
perfect share for widget.
thank you very much for your share.
thank you very much for your share...
Thank you very much,perfect
Gelinlik
http://www.harvestturkey.com thank you very much
Platelet Rich Plazma thank you very much
http://www.sawah-egy.blogspot.com
thank you
widget.Thank you very much
Not working in Firefox 3.6.17
thanks a lot))) very helpful post! appreciate it)
very iteresting psot! thanks a lot
wonderful.this is very interesting.Thank you very much for this post
demo doesn't work!
not in IE9 or Chrome
Thanks for sharing such an interesting information. I think this is really a very nice post. Thanks for the great content!
Thanks for the article. Very interesting.
http://top-answers.net/webdesign/html-onclick-expansion-javascript.html
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.
thanks for sharing..
eksis dengan internet
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.
Post a Comment