Toggle Slide delay

by ian_smithz

HTML

<div class="third">
    
    <h2 class="toggle">CLICK</h2>
      
    <div id="panel">
 	    <p>Panel details go here.</p>
 	</div>
    
</div>

CSS

.third {
	width:33.3%;
	float:left;
	text-align:center;
	-webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    transition: all ease 1s;
}
.full {
	width:100%;
	-webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    transition: all ease 1s;
}
#panel {
    float:left;
    width:100%;
    height:300px;
    padding:2%;
    background:red;
    border:1px solid #fff;
    clear:both;
    display:none;
}

JavaScript

$(function(){
$('.toggle').click(function() {
    if ($(".third").hasClass('full')) {
        
        $('#panel').slideToggle(1000, function(){
            $(".third").toggleClass("full");
        });
    }
    else {
        $(".third").toggleClass("full");
    $('#panel').delay(3000).slideToggle(1000);
    }
});
});