CODEWITHSUNDEEP
cssinternet-explorercss-selectors
Atomix
Atomix

Reputation: 2500

CSS trick in place of javascript... almost working

    <html>
    <style type="text/css">
    h3{
        display: block !important;
    }
    h3:active{
        display: block !important;
    }
    h3 span:before{
        content: "[-]";
    }
    h3:active span:before{
        content: "[+]";
    }
    div#summary:active >  h3, h3:active ~ h4, h3:active ~ ul{
        display: none;
    }
    </style>
    <body>
    <div id="summary">
    <h3>Click to hide<span></span></h3>
    <ul><li>first</li></ul>
    <h4>title 1</h4>
    <ul><li>second</li></ul>
    <h4>title 2</h4>
    <ul><li>third</li></ul>
    <h4>title 3</h4>
    <ul><li>fourth</li></ul>
    </div>
    </body>
    </html>

Live demo: http://jsfiddle.net/BxrJz/

It works in chrome and firefox, but how do I get it to work in ie? Also, is there a way to make it stay in the hidden state until it is clicked again, so you don't have to hold it?

Upvotes: 1

Views: 165

Answers (2)

JakeParis
JakeParis

Reputation: 11210

This is some pretty cool css coding, but in terms of practicality, I would rethink the whole method you've used. It's odd that one would click on the heading only, but not the [-] "button". It only hides the text while the <h3> is in the active state, then the text reappears, and this is not intutive, not to mention practical.

If you are intent on researching this, google Stu Nicholls or Suckerfish for some css only hide/show behaviors. Learn from them, then adapt those to what you need. But as @Gaby said, CSS can't change the state of objects for good, only while the user is taking an action (like :hover or :active).

As a side issue, I would add cursor:pointer to the <h3> and <span> tags so it's clearer that it's a clickable element.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

Not without javascript... CSS responds to events. It cannot change the DOM state permanently.

Upvotes: 2

Related Questions