The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Hide and show a div using css only

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #34248

    I came across this page: 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?


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


    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?



    You could do something similar using :focus

    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.


    Thanks everyone! It is great to learn something new.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.