Collapsing Divs

by Dylan Schadeck

HTML

<div id="wrapper">
    
    <div class="panel">
        <img src="http://placehold.it/100x80&text=image" alt="image" />
        <p>Quisque  commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu.  Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Quisque  commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu.</p>
    </div>
    
    <div class="panel notop">
        <img src="http://placehold.it/100x80&text=image" alt="image" />
        <p>Quisque  commodo  hendrerit lorem quis egestas. Maecenas quis tortor arcu.  Vivamus  rutrum nunc non neque consectetur quis placerat neque lobortis. Quisque  commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu.</p>
    </div>
    
    <div class="panel notop">
        <img src="http://placehold.it/100x80&text=image" alt="image" />
        <p>Quisque  commodo  hendrerit lorem quis egestas. Maecenas quis tortor arcu.  Vivamus  rutrum nunc non neque consectetur quis placerat neque lobortis. Quisque  commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu.</p>
    </div>

</div>

CSS

* {  font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333; padding: 0; margin: 0; }
#wrapper { width: 300px; margin: 50px auto; }
.panel { border: 1px solid #ccc; background-color: #eee; padding: 11px; overflow: auto; }
.panel img { float: left; margin: 0 6px 0px 0; -webkit-border-radius: 9px; }
.panel p { width: 170px; float: right; }
.notop { border-top: 0; }

JavaScript

jQuery(document).ready(function(){
    $('.panel').click(function() {        // will execute when any .panel is clicked
        if ($(this).next().is(':visible')) {
            $(this).next().slideUp('fast'); 
        }else{
           $(this).next().slideDown('fast'); 
        }
        return false;
    }).next().hide();                     // hide panel below this one
});