CSS add text onclick?

[JimGfB]

Hi,

I want to have a page with a few headings and then when clicked displays text underneath the applicable heading.

I would prefer to do this with CSS if possible as I am interested in using it in a newsletter later on also.

Thanks,

Jim

[WebJoel]

Short of making the HEADER be a link and stuffing the link with "<span></span>" text, hiding it and revealing it on hover or on click with the appropriate pseudo-class, this sounds more like a javascript thing.

Here is what I mean:

http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

[JimGfB]

Thanks, that is exactly what I am looking for but also I was looking at something that only used CSS as I may need to use this or something similar in an email newsletter.

I will have a look at combining <span> and onclick, I am using a span and hover combination already, I wanted to have the text appear as if it was a paragraph below, would this be using positioning in css?

I tried looking something like that up before, however there were no examples I could easily find, I will muster something up that will hopefully work.

Otherwise I will use Javascript

[Centauri]

Something like this (http://www.cssplay.co.uk/menu/more) may be want you want.

[huckle]

This is completely untested, but who knows? It may work:

<div id="content">
<h2>Header</h2>
<div id="hidden_content">Content</div>
</div>

The CSS:

#content div#hidden_content{
display:none;}
#content h2:hover div#hidden_content{
display: block;}

It's based on http://meyerweb.com/eric/css/edge/popups/demo.html

If it works at all you will probably have some browser issues as its hardly standard practice to apply pseudo-classes to h2s/divs!

If it does work, please let me know! (If it doesn't let me know what you find works...)

Huckle