Show/Hide Content With CSS & Javascript
My apologies for the recent lack of updates and the briefness of this post, things have been (and still are) really busy on my end. Anyway, when building websites for my clients a popular request is to have content that can be toggled by the user. Today I’ll show you have to have this effect done really quickly. Although this method does not support persistence (saving cookies to the users browser to remember what they have hidden/shown), I’m sure there are some who will find it useful.
Place this code in your <head> tags.
function shToggle(content) {
if (document.getElementById(content).style.display == "none")
document.getElementById(content).style.display = "block"
else
document.getElementById(content).style.display = "none"
}
</script>
Now you can effectively show/hide content by placing id=”elementname” style=”display:none;” inside the element tag you wish to be toggle-able, and onclick=”shToggle(’elementname‘); return false;” inside the link code of the image or text the user clicks to toggle it. You can see a live example of it on this page, or simply look at the example code snippet below.
I use a similar script in my pages. To extend this script to toggle other elements (such as a table row) you need to set the display style to it’s own setting. I.e. a tr will need to be set to ‘table-row’, a td to ‘table-cell’ etc. See http://www.w3schools.com/css/pr_class_display.asp for other options.
However, this throws an error in IE. So you need to either put each statement in a try/catch block, or be more clever about browser detection to determine the correct method.
Comment by Neon Knight — October 31, 2007 @ 4:23 pm
kinda ‘cheap but you can also do:
document.getElementById(’DIV_ID’).innerHTML=”;
Comment by Jesse — November 8, 2007 @ 7:28 pm
I search more than 1 hour for this.
Really thanks.
Comment by Moin Uddin — November 18, 2007 @ 6:01 am
I know this is simple but I got lost on this
“Now you can effectively show/hide content by placing id=”elementname” style=”display:none;” inside the element tag you wish to be toggle-able, and onclick=”shToggle(’elementname‘); return false;” inside the link code of the image or text the user clicks to toggle it.”
where is the “link code of the text” . What and where is the element tag? do I put the “id=”..on the css style sheet? I know my questions is dumb, I know where to insert the code in the header and the code where I want the content revealed, but i can’ get where to put the id thing you are talking about.
You say to look at the code snippet below and I did but there is no code such as you describe in the snippet you say to look at.
any help appreciated. daybyday@sisna.com
Comment by Shelly — January 3, 2008 @ 2:34 am
I usually don’t declare the ‘display:’
My script is exactly like yours except this line:
document.getElementById(content).style.display =
‘block’
I will write as so:
document.getElementById(content).style.display = ”
Comment by keven — January 31, 2008 @ 3:13 pm
Hm… all in all I’m agree with you, but your readership… what are they gonna say about it?
Comment by Jaap — April 11, 2008 @ 2:34 am
Hi,
When I used it for more than one content , and when I click to “hide the content” it causes problem with explorer 7. The site is going down and there occurs a blank on the top :s Why is that and any solution there?
Comment by may — November 7, 2008 @ 11:01 am