Accordion jquery
Accordion jquery
Help please. how to do that on page load automatically open the first unit?
script
- <script type="text/javascript">
$(document).ready(function() {
$('.showhide').click(function() {
$('.showhide-all').slideUp(500);
$('.showhide').removeClass('active');
$(this).next('div').filter(function(){return $(this).css('display')=='block'}).slideUp(500);
$(this).next('div').filter(function(){
return $(this).css('display')=='none'
}).slideDown(500).prev('div').addClass('active');
});
});
</script>
hpml
- <style type="text/css">
.showhide{
cursor: pointer;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 2px #333;
background: #4698BF;
background: -webkit-gradient(linear, left top, left bottom, from(#55ACD4), to(#4698BF));
background: -moz-linear-gradient(top, #55ACD4, #4698BF);
background: -o-linear-gradient(top, #55ACD4 0%, #4698BF 100%);
background: gradient(linear, top, #55ACD4, #4698BF);
border: 1px solid #46768B;
border-radius: 4px;
padding: 5px 11px;
font-size: 1.15em;
width: 250px;
margin-bottom:1px;
}
.showhide:hover,.showhide.active{
color: #fff;
text-decoration: none;
background: #A68328;
background: -webkit-gradient(linear, left top, left bottom, from(#BFAB75), to(#A68328));
background: -moz-linear-gradient(top, #BFAB75, #A68328);
background: -o-linear-gradient(top, #BFAB75 0%, #A68328 100%);
background: gradient(linear, top, #BFAB75, #A68328);
border: 1px solid #A68328;
border-radius: 4px;
}
.showhide-all{
display:none;
width: 250px;
background: #FFE7A7;
background: -webkit-gradient(linear, left top, left bottom, from(#FFE7A7), to(#FFDE87));
background: -moz-linear-gradient(top, #FFE7A7, #FFDE87);
background: -o-linear-gradient(top, #FFE7A7 0%, #FFDE87 100%);
background: gradient(linear, top, #FFE7A7, #FFDE87);
border: 1px solid #FFD25E;
padding: 5px 11px;
margin-bottom:3px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.showhide').click(function() {
$('.showhide-all').slideUp(500);
$('.showhide').removeClass('active');
$(this).next('div').filter(function(){return $(this).css('display')=='block'}).slideUp(500);
$(this).next('div').filter(function(){
return $(this).css('display')=='none'
}).slideDown(500).prev('div').addClass('active');
});
});
</script>
<div class="showhide">open1</div>
<div class="showhide-all">
text text text
text text text
</div>
<div class="showhide">open2</div>
<div class="showhide-all">
text text text
text text text
</div>
<div class="showhide">open3</div>
<div class="showhide-all">
text text text
text text text
</div>
<div class="showhide">open4</div>
<div class="showhide-all">
text text text
text text text
</div>