show/hide div element with dhtml

James Brown

I am coding a new site and want to add a facility where I can click on a link with the text "show example" and when I click the link, it expands a previously hidden

which follows a hyperlink. When I click the link again, the DIV disappears. Ideally I would use the CSS :before class attribute and automatically prepend a hyperlink to the start of any DIV with a specific class. Unfortunately IE doesn't support this, so this is how I would like it to appear in my html code: [Show example](javascript:)

this text will show/hide when the link above is clicked

I know its wrong, but that's the basic idea I'm trying to achieve. Basically what I want to do is, when the link is clicked, the _next_ DIV element is shown/hidden. I know I need to write a function called "toggleDiv" - and the usual code that I see on the internet requires that I give the DIV an "id", and use this id when I call the javascript toggleDiv function. What I want to do is, pass a "this" reference (or something similar) which basically says, "this" is the ID of the tag that was clicked on....and in the toggleDiv function, I locate the next element (which will be the DIV), and show/hide it using HTML. in other words, I want to avoid having to give each DIV in my document a unique ID - is it possible to find a solution for this? thanks, James
http://www.catch22.net -- modified at 16:59 Saturday 15th October, 2005

Guffa

If you can place the link and the div inside another div, it would be quite easy. Something like:

Then you could get the parent element of the link and change the className property. Use two css classes where one will hide the Info tag inside it:

.ToggleHidden .Info { display: none; }
.ToggleShown .Info {}

--- b { font-weight: normal; }