Comments on: Show/Hide Content With CSS & Javascript

By: may

may — Fri, 07 Nov 2008 15:01:42 +0000

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?

By: Jaap

Jaap — Fri, 11 Apr 2008 06:34:57 +0000

Hm… all in all I’m agree with you, but your readership… what are they gonna say about it?

By: keven

keven — Thu, 31 Jan 2008 19:13:06 +0000

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 = ”

By: Shelly

Shelly — Thu, 03 Jan 2008 06:34:05 +0000

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

By: Moin Uddin

Moin Uddin — Sun, 18 Nov 2007 10:01:04 +0000

I search more than 1 hour for this.
Really thanks.

By: Jesse

Jesse — Thu, 08 Nov 2007 23:28:47 +0000

kinda ‘cheap but you can also do:

document.getElementById(’DIV_ID’).innerHTML=”;

By: Neon Knight

Neon Knight — Wed, 31 Oct 2007 20:23:48 +0000

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.