Hide/Show text using CSS

I am very new to css. I am trying to show and hide text by clicking a button. My intention is to use this in a threaded discussion board.
For example
I'd like the topics to be displyed when the page loads
1) topic 1 (Open/Close)
2) topic 2 (Open/Close)

On hitting the Open button this would be something like this:

1) topic 1 (Open/Close)
---message 1
---message 2
---message 3
---message 4

2) topic 2 (Open/Close)

Hope someone can suggest me an answer or point me to one.

Thanks

You can't just use CSS to do this alone, but controlling CSS with javascript you can.

Use the display property of css - none removes it from the document flow altogether, block makes it appear in a block (standard display for divs, tables, h tags etc.)

So you could have

<div id="topic1" style="display: none;">
TEXT
TEXT
</div>

And a little javascript function which does this

function showDiv() {
document.getElementById('topic1').style.display = String ('block');
}

You should be able to ammend that to your needs.

-D

Don't remeber if I thanked you for ths. But it worked out perfectly for me. Thank you for taking the time to help out.

Maneesha

Here's an example using CSS. The code will degrade gracefully for non-graphic UAs such as Lynx or assistive technology for the handicapped.

cheers,

gary