SimpleAccordion.js – Basit bir akordeon uygulaması

Akordiyon menü örnekleri  hazırlayabilmeniz  için kullanımı oldukça basit  bir akordiyon menü uygulaması. Bu tür  örnekleri  hep akordiyon menü diye adlandırıyorum ama illa  menü olacak diye bir kaide  yok. Belki  karşılaşmışsınızdır bazı sitelerde  farklı amaçlarla kullanılan akordiyon örnekleri  bulunuyor. Zaten  Simple Accordion  da kullanıma hazır bir menü örneği değildir. Tıklandığında  açılan bölümlere  resim  yada yazı da ekleyebilirsiniz. İsterseniz  açılan bölümlere link ekleyerek menü  olarak ta kullanabilirsiniz. Normal de div  diye adlandırdığımız çerçevelere  akordiyon uygulamasında dl olarak adlandırılmış. Akordiyon butonları dt ve akordiyon içeriği de dd  olarak adlandırılmış. Ayrıca  ilk  sayfa  açıldığında  açık olmasını istediğiniz  akordiyon sekmesine active sınıfını  eklerseniz  sekmeniz  açık görünecektir.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js ve css adresleri :

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script src="../jquery.simple.accordion.js"></script>
 <link rel="stylesheet" href="../jquery.simple.accordion.css">

JavaScript :

<script>
$(function () {
 // Apply to element 
 $(".accordion").SimpleAccordion(); 
});
</script>

• Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<dl class="accordion">
 <dt>Item 1</dt>
 <dd class="active"> <!-- Default to active -->
 <p>
 Akordiyon içeriği
 </p>
 </dd>
 <dt>Item 2</dt>
 <dd>
 <p>
 Akordiyon içeriği
 </p>
 </dd>
 <dt>Item 3</dt>
 <dd>
 <p>
 Akordiyon içeriği
 </p>
 </dd>
 <dt>Item 4</dt>
 <dd>
 <p>
 Akordiyon içeriği
 </p>
 </dd>
 <dt>Item 5</dt>
 <dd>
 <p>
 Akordiyon içeriği
 </p>
 </dd>
</dl>