How Can I Toggle A Div To Reveal Content With Css

So I've got a div that should expand to reveal a list when toggled. The before and after states can be seen here http://reversl.net/box/ but what do I need to add to my styling to

Solution 1:

I'm afraid I couldn't work out, in your sample code and image, what you wanted to click on and what you wanted to show. However, the following works with an onclick-like event with pure CSS:

<divid="wrapper"><ulid="top"><li><ahref="#one">One</a></li><li><ahref="#two">Two</a></li></ul><divclass="box"id="one"><p>One</p><span><ahref="#top">Close</a></span></div><divclass="box"id="two"><p>Two</p><span><ahref="#top">Close</a></span></div></div>

CSS:

.box {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 50%;
    margin-left: -25%;
    border: 4px solid #000;
    background-color: #f90;
    /* the CSS, above, is all for aesthetic purposes, what matters is the following */opacity: 0;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -0-transition: all 1s linear;
    transition: all 1s linear;
}

.box:target {
    opacity: 1;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -0-transition: all 1s linear;
    transition: all 1s linear;
}

​JS Fiddle demo.

Unfortunately it seems (in Chromium 17/Ubuntu 11.04) impossible to animate from display: none; to display: block; Similarly a transition from height: 0 to height: auto also fails (trying either results in a sudden appearance rather than a transition. So the content in the demo is always 'there,' but simply hidden (with opacity) and then shown once the relevant link is clicked.

However for a slide-toggle like effect:

.box {
    /* aesthetic stuff excised for brevity */opacity: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -0-transition: all 1s linear;
    transition: all 1s linear;
}

.box:target {
    opacity: 1;
    height: 3em;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -0-transition: all 1s linear;
    transition: all 1s linear;
}

​JS Fiddle demo.

Solution 2:

You can use the "Checkbox Hack": http://css-tricks.com/the-checkbox-hack/

Solution 3:

Making these modifications of your code will give you a CSS transition.

Inside your <div class="box">, add a container <div class="trans"> around the contents, like so:

<divclass="box"><divclass="trans"><imgsrc="http://www.placehold.it/250x300"alt="" /><divclass="section progress"><h4><ahref="#">Div After</a></h4><divclass="metrics"><divclass="meter"><spanstyle="width: 75%"></span></div><!--.meter--></div><!--.metrics--></div><!--.section-progress--><divclass="sub_section"><ulclass="list"><li>Item 1</li><liclass="last">Item 2</li></ul></div><!--.sub_section--></div><!--.trans--></div><!--.box-->

Then, in your css, add:

.box > .trans {
    height:365px;
    overflow:hidden;
    }

.box > .trans:hover{
    height: 500px;
    -webkit-transition: height .25s linear;
    transition: height .25s linear;
    }

This will give you a mouseenter/mouseleave type effect. I don't think you'd be able to do an "onclick" type effect that would hold it open with just CSS.

Solution 4:

You're gonna need to use javascript to listen for the event that fires the transition, unless you want it to apply on hover. so, you can start with something like this:

$('.box').click(function(){
    $(this).toggleClass('show');
});

Then in the css, you need to have the class with the new size and the transition applied:

.show
{
height: 300px;
-webkit-transition: height .25s ease-in-out;
transition: height .25s linear;
}

If you want a purely CSS solution, then you'll have to handle this using the ':hover' pseudo-class like redlena said. The only difference I would make is that you don't need an additional div (.trans) and you don't need to specify the child selector in your CSS either (.box > .trans).

Solution 5:

This cannot be achieved with pure CSS, trying using JavaScript or jQuery

This example gets you close, but it does not stay active once clicked.