jCollapse.js – arşivinizde bulunması gereken bir akordeon uygulaması

Aradan bunca zaman geçtikten sonra düzeltmek için açtığım eski konuları görünce şaşırmadım diyemem. Akordiyon diye arama yapınca o kadar fazla benzer başlıkla karşılaşacağımı zannetmiyordum doğrusu. Her biri için kaç tane değişik tanıtım yapılabilir ki ? Bu yüzden Googleye küfür etmemek için kendimi zor tuttuğum zamanlar dahi oluyor. Gerçi oda kendine göre haklı ama sonuç olarak böyle saçma sapan alakasız başlık ve konular eklemek zorunda kalıyorum. Sadece uygulamanın ismini yazsak açıklayıcı olmuyor diye adsense banlanma riski benze rbaşlık atınca da filtreye girme riski çıkıyor. Neyse sadede gelecek olursak sekmelere tıkladığınızda ok işareti aşağı doğru bakıyor kapalı olan sekmelerin de ok işaretleri sağa doğru bakıyor. Böyle bir uygulama işte. Daniel Stocks  tarafından hazırlanmış bir çalışma.

Kullanım

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

Js ve stil dosyaları : 

    <link rel="stylesheet" href="demo.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="../src/jquery.collapse.js"></script>
    <script src="../src/jquery.collapse_storage.js"></script>

JavaScript :

      <script>
        $("#css3-animated-example").collapse({
          accordion: true,
          persist: true,
          open: function() {
            this.addClass("open");
            this.css({ height: this.children().outerHeight() });
          },
          close: function() {
            this.css({ height: "0px" });
            this.removeClass("open");
          },
        });
      </script>

• Body etiketleri arasına eklenecek olan bölüm.

Html :

		<div class="col c2">
			<h2>w/ CSS3 Animations</h2>
			<div id="css3-animated-example">
        <h3>Hello</h3>
        <div>
          <div class="content">
            <p>This example </p>
            <p>Hello Sir.</p>
            <p>I'm sliding</p>
          </div>
        </div>
        <h3>Friend</h3>
        <div>
          <div class="content">
            <p>This example</p>
          </div>
        </div>
        <h3>Foe</h3>
        <div>
          <div class="content">
            <p>This example</p>
          </div>
        </div>
      </div>