How can I toggle a div to reveal content with CSS


Tags: css,html,hide,toggle,css-transitions

Problem :

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 make this happen? I'd like to use css transitions for added effect. I'm not worried about browser compatibility because it's just for learning purposes. Any tips?

<div class="box"><img src="http://www.placehold.it/250x300" alt="" />
        <div class="section progress">
            <h4>
                <a href="#">Div Before</a>
            </h4>
            <div class="metrics">
                <div class="meter">
                    <span style="width: 75%"></span>
                </div><!--.meter-->
            </div><!--.metrics-->
        </div><!--.section-progress-->
</div><!--.box-->

<div class="box"><img src="http://www.placehold.it/250x300" alt="" />
        <div class="section progress">
            <h4>
                <a href="#">Div After</a>
            </h4>
            <div class="metrics">
                <div class="meter">
                    <span style="width: 75%"></span>
                </div><!--.meter-->
            </div><!--.metrics-->
        </div><!--.section-progress-->
        <div class="sub_section">
            <ul class="list">
                <li>Item 1</li>
                <li class="last">Item 2</li>
            </ul>
        </div><!--.sub_section-->
</div><!--.box-->

.boxes {
width: 100%;
padding: 1%;
}

.box {
width: 20%;
padding: 1%;
background: #fff;
-moz-box-shadow: 2px 3px 4px 0px #e9e9e9;
-webkit-box-shadow: 2px 3px 4px 0px #e9e9e9;
box-shadow: 2px 3px 3px 0px #e9e9e9;
display: inline-block;
margin-top: 1em;
}

.box img {
margin-bottom: 1%;
}

.progress a {
margin: 0;
padding: 0;
color: #999;
text-decoration: none;
}

.metrics {
margin: -1em 0 0 0;
padding: 0;
background: #c0c0c0;

}
.accordion .progress .meter {
background: #555;
width: 100%;
position: relative;
}

.meter > span {
height: 10px;
display: block;
background-color: #777;
position: relative;
overflow: hidden;
}

.sub_section {
margin-top: 1em;
border-bottom: none;
}

.list {
padding: 0;
margin: 0;
}

.list li {
background: #dcdcdc url('http://placehold.it/40x40') no-repeat;
font-size: 11px;
color: #999;
list-style: none;
padding: 1.3em 1em 1.3em 4.5em;
margin-bottom: 5px;
}

.list .last {
border-bottom: none;
}


Solution :

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:

<div id="wrapper">
    <ul id="top">
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
    </ul>
    <div class="box" id="one">
        <p>One</p>
        <span><a href="#top">Close</a></span>
    </div>
    <div class="box" id="two">
        <p>Two</p>
        <span><a href="#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.


    CSS Howto..

    How to use add/subtract in css propert?

    CSS: Background in front of image - how to prevent it?

    Fixed Header Scrollable Table - How to preserve horizontal scroll position using css jquery on page loads

    How to make recessed button in CSS

    How can I write in CSS if I'm using list tag for this? [closed]

    Unicode character, down triangle, shows up as strange text

    how to get both icon and heading in same line in css

    How to apply CSS only if class exists elsewhere in code?

    how to really include html codes inside php

    how to keep form element inline with text on headline in HTML/css/boostrap 3?

    How to fade in and fade out text on a timer using css animations

    How to highlight an image after selection using css or jquery? [closed]

    Android WebView : how do I control webView height?

    How can i make the horizontal navigation menu center aligned

    How to place the text after thumbnails at the bottom?

    How can I calculate in SVG coordinates?

    How can I make my username div expand its width depending on the length of the username?

    How to make images always relative to a div using CSS

    How to get Bootstrap's “hero-unit” to fit across the entirety of top section?

    How can I make my footer stay at the bottom with a dynamically re-sizable form?

    How to make a visible rectangular frame in CSS to contain some sections of my view?

    How to change radio button place & add line separator

    How to open a jquery tab from a link that is outside the tab?

    How to get css background color on tag to span entire row

    How does positioning work in HTML/CSS?

    How to show parts of sprite with CSS keyframes to create animation?

    How can I mix vertically-centered elements with different font sizes and retain consistent line height?

    How do I fix the navigation menu in Firefox and Internet Explorer?

    CSS Lining up images. Always 1px difference. Why/How?

    How to remove Clear:Both in CSS