Örneğin şekline bakıldığında kwicks eklentisini andıran bir yapısı var. Akordiyon örnekleri genelde ya manşet kısmındaki slayt galeri örnekleri için kullanılır yada akordiyon menü olarak kullanılır. Bu örneğimizde bildiğimiz tab örneğinin değiştirilmiş hali diyebiliriz. Tab örneklerinde tıklanan sekmenin açıklaması altında açılırken bu demoda slayt akordiyon olarak açılıp sekmenin sağında açıklamalar çıkıyor. Biraz özelleştirip akordiyon menü yada manşet kısımlarına ekleyebileceğiniz galeri alanı olarakta kullanabilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js ve css dosya adresleri :
<script src="https://cdn.jquerytools.org/1.2.3/full/jquery.tools.min.js"></script> <link rel="stylesheet" type="text/css" href="css/standalo.css"/> <!-- accordion styling --> <link rel="stylesheet" type="text/css" href="css/tabs-acc.css"/>
JavaScript :
<script>
$(function() {
$("#accordion").tabs("#accordion div", {
tabs: 'img',
effect: 'horizontal'
});
});
</script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<!-- accordion root --> <div id="accordion"> <!-- accordion header #1 --> <img src="images/streamin.png" /> <div style="width:200px;"> <h3>First pane</h3> <p> Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra. </p> </div> <img src="images/flash000.png" /> <div> <h3>Second pane</h3> <p> Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. </p> </div> <img src="images/streamio.png" /> <div> <h3>Third pane</h3> <p> Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna. </p> </div> </div>