Mevcut bir projemde basit amaçlı bir Accordion panele ihtiyaç duydum. En az kodu yazarak bu işi nasıl halledebilirim derken ve özellikte projemde olan öğeler ile uyumlu olsun diye düşünürken bir kaç küçük araştırmadan sonra en kısa ve en kullanışlı olarak bu yöntemi buldum.
Yöntem aslında çok basit öncelikle aşağıdaki gibi html kodundan oluşuyor;
<div class="demo-show2">
<h3>Deneme 1</h3>
<div>Deneme 1 'in içeriği</div>
<h3>Deneme 2</h3>
<div>Deneme 2 'in içeriği</div>
<h3>Deneme 3</h3>
<div>Deneme 3 'in içeriği</div>
</div>
Bu aşamadan sonrada JQuery kodu olarak şöyle bir kod geliyor;
<script type="text/javascript">
$(document).ready(function() {
$('div.demo-show2> div').hide();
$('div.demo-show2> h3').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
});
} else {
$nextDiv.slideToggle('fast');
}
});
});
</script>
En son olarakta bir stil oluşturuyoruz;
<style>
.demo-show2 {
width: 97%;
margin: 1em .5em;
background-color: #bfcd93;
}
.demo-show2 h3 {
margin: 0;
width: 100%;
padding-top: 4px;
padding-bottom: 4px;
border-top: 1px solid #386785;
border-bottom: 1px solid #386785;
border-left: 1px solid #386785;
border-right: 1px solid #386785;
cursor: pointer;
}
.demo-show2 div {
background-color: #f0f0f0;
width: 100%;
border-bottom: 1px solid #386785;
border-left: 1px solid #386785;
border-right: 1px solid #386785;
}
</style>