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 remove this head css styling with javascript?

    how to prevent css inherit?

    How to make CSS float left not bend around when browser width is shrunk

    How to put
      around image in css

    How to load Different css everytime onload

    How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

    How to make a div fill the entire page height using css? [closed]

    How would you style a PHP suffix with CSS?

    How can I override the CSS ul menu for the JavaScript autocomplete?

    How to deselect using :not according to css property and value

    CSS: how can I make this table fit the border when resized?

    How to style focus on jquery ui dialog widget?

    How to make my popup window dead center no matter what width it is

    how to achieve this this horizontal line from css or bootstrap

    How can I automatically change the CSS min-height value of a div when a JavaScript is performed?

    how to create 100% vertical line in css

    CSS stacking order - how to get this right?

    How to use CSS to surround a number with a circle?

    Rails - how to add css to a helper method

    How to detect if my search bar has been expanded?

    How to apply a complex style to the selection of a Select2 component?

    How to keep height of parent div with absolute positioned img inside?

    How do i select all nodes and apply a css style to all of them, D3

    How to modify the CSS Properties (height width) of a div element via JQuery?

    how do you set css to add an asp img?

    How do I vertically align my wrapper so it will be centered on a (mobile) screen?

    CSS - How to remove comments and make CSS one line

    How can I set a border in alignment with other borders

    How to prevent PHP pushed HTML tables exceeding the length of the page

    How do I get two side by side divs displayed correctly inside a bordered, dynamic height content area?