トリガーの上に展開するアコーディオン

普段目にするアコーディオンは大抵トリガーとなるボタンの下にペロッと展開しますが、
トリガーの上に開き、かつ展開時はトリガーが非表示になるアコーディオンを実装する機会があったのでメモ。

参考にさせていただいたのはこちらです。
クリックすると上に開くアコーディオン


$(function(){
     $(".acordion").hide();
     $(".triger").click(function(){
          $(".content").prev().slideToggle();
          $(this).parent().css("display","none");
     });
     $(".acordion .close").click(function(){
          $(".acordion").slideToggle();
          $(".triger").parent().css("display","block");
     });
});


<div class="acordion">
    <p class="close">close</p>
    <p>コンテンツ</p>
</div>
<div class="content">
    <p class="triger">トリガー</p>
</div>

通常であれば4行目が


$(".content").next().slideToggle();

となるところを


$(".content").prev().slideToggle();

に書き換えるだけ。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中