Html Show and Hide div panel

Published on Author Code Father

Html:

<div class=”panel”></div>
<a href=”javascript:void(0);” class=”slider-arrow show”>&raquo;</a>

CSS:

.panel {
width:300px;
float:left;
height:550px;
background:#d9dada;
position:relative;
left:-300px;

}
.slider-arrow {
padding:5px;
width:10px;
float:left;
background:#d9dada;
font:400 12px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
position:relative;
left:-300px;
}

Jquery:

$(function(){
$(‘.slider-arrow’).click(function(){
if($(this).hasClass(‘show’)){
$( “.slider-arrow, .panel” ).animate({
left: “+=300”
}, 700, function() {
// Animation complete.
});
$(this).html(‘&laquo;’).removeClass(‘show’).addClass(‘hide’);
}
else {
$( “.slider-arrow, .panel” ).animate({
left: “-=300”
}, 700, function() {
// Animation complete.
});
$(this).html(‘&raquo;’).removeClass(‘hide’).addClass(‘show’);
}
});

});

Comments

comments