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.

Download Simple Accordion

Demo Simple Accordion

Kullanım

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

Js ve css adresleri :

<script src="https://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>