Hide and show a div using css only

[Tomz]

I came across this page: http://photoshopworld.com/schedule/ in which when the title of a class (in bold) is clicked, the description in a div shows up. If clicked again, the description becomes hidden. With javascript, this is easy to do. But I did not see any javascript function is called when viewing the page source. The hide/show functionality seems to be accomplished using css only. Does any one know how this is done?

[chrisburton]

What about the radial button thing Chris did for switching tabs?

[Tomz]

Wolfcry & Paulie,

You are correct that there is a plenty of javascript on this page. When javascript is turned off, clicking on a title does not bring up the description anymore. It seems that javascript makes this feature available. However, if you look at html source as the example below

Pre-Conference Workshop Registration Open

Optional Pre-Conference Workshops
Must be a registered Photoshop World attendee to participate. Separate registry and fee required.

there is no javascript onclick event linked to the title “Pre-Conference Workshop Registration”. That was why I initially thought the css made the click feature available in order to show the description. Do you know how this is done?

Thanks,
Tom

[thomas]

You could do something similar using :focus

http://jsfiddle.net/ce6Fe/

It won’t hide until you click away, but it works without JavaScript. Of course, block-level elements aren’t valid within an anchor element, unless you’re using HTML 5.

[Tomz]

Thanks everyone! It is great to learn something new.

[Author]

Posts