Switching content in the same DIV using CSS

Discussion in 'HTML & Website Design' started by theshad_ow, Jul 17, 2008.

  1. #1
    I want to know if there is a way of switching content within the same content DIV by clicking a link (in the same div). I'd prefer this purely in CSS. I can do this using PHP or other server scripting but I just want to use CSS. I also do not want to use css overflow property.

    Your help will be appreciated.

    Thanks!
     
    theshad_ow, Jul 17, 2008 IP
  2. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can use the visibility: hidden property and a small amount of JS to do this. Have it so when you click a link, you get the ID of the div, and set it's visibility status to visible. An example would be:

    onclick="document.getElementById('DIVIDHERE').style.visibility='visible'"
    Code (markup):
    This is the only method I know that is using the least amount of scripting.
     
    yankzilla, Jul 17, 2008 IP
  3. awatson

    awatson Active Member

    Messages:
    112
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    Another option is using the ":hover" selector to change a child element from "display: none;" to "display: block;" - then you could position and z-index it to cover the other element. But that's not an "on click" solution - if that's necessary, I think you'll need some javascript.
     
    awatson, Jul 18, 2008 IP
  4. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I would suggest the :hover, but it is not supported by IE.
     
    yankzilla, Jul 18, 2008 IP