panels in a togglebox - Andrew Pougher

JQuery and CSS panels in a togglebox - Andrew Pougher

by Andrew Pougher

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<div id="dealbtn">Click to slide down panel</div>
<section id="dealbox" class="clearfix">
    <div class="article span1">d</div>
    <div class="article span1">d</div>
    <div class="article span1">d</div>
    <div class="article span1">d</div>
    <div class="article span1">d</div>
    <div class="article span1">d</div>
</section>

CSS

#dealbox {
    padding:20px;
    display:none;
    background:#ededec
}
#dealbtn {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
.article {
    color:#fff;
    margin-left:40px;
    margin-bottom:25px;
    padding:3px;
    color:#ddd;
    font-size:12px;
    font-weight:normal;
    line-height:23px;
    text-align:justify;
    width:160px;
    height:180px;
    display:inline-block;
    position:relative;
    left:-900px;
    background-color:#2c2c2c;
    -moz-border-radius-bottomright:4px;
    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-right-radius:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    border-bottom-left-radius:4px;
    -moz-background-clip:padding;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
}

JavaScript

$("#dealbtn").click(function () {

     if ( !$('#dealbox').hasClass("open")) {
      
         $('#dealbox').slideToggle(600, "linear", function () {
             $(this).toggleClass('open');
            
             loadDealData();
         });

     }else{
        $('#dealbox').fadeOut(344)
      .toggleClass('open');
            $('.article').css("left", '-900px');
     }

 });




 function loadDealData() {
     var d = 300;
    $('.article').each(function () {
         $(this).stop().animate({
             'marginTop': '0px',
                 'left': '0px'
         }, d += 250, 'easeOutElastic');
     });
 }