jqueryでアコーディオン

下記がとても参考になる
参考ページ

■html部分

<div>
    <h3 class="accordion_head">アコーディオンのトリガー部分</h3>
    <p>アコーディオンする部分。</p>
</div>

■スクリプト部分

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.accordion_head').click(function() {
        $(this).next().slideToggle();
    }).next().hide();
});
</script>

■詳細
まずページを表示させるとscript部分6行目の.next().hide();が実行されます。
「トリガー(.accordion_head)の次の要素(next)を隠す(hide)」という命令ですね。
これでアコーディオンしたい部分が隠されて表示されるわけです。

次にトリガークリックで実行される部分。5行目の$(this).next().slideToggle();
このとき$(this)にはクリックしたトリガーが入っています。
「トリガー(.accordion_head)の次の要素(next)をスライド(slideToggle)する」ってことですね。
こう書いておくことで同じページに何個もアコーディオンがあっても、クリックしたトリガーだけ実行されます。
slideToggleなのでクリックで表示非表示を交互に実行します。
slideToggle()の中に’slow’(遅い)、’nomal’(普通(指定なしと同じ))、’fast’(早い)を入れるとスライドスピードも変えられます。

超シンプルなコードなので色々カスタマイズできそうですね。
(classを足して開いているアコーディオンだけ色変えたりとか、一個表示してるときは他のアコーディオンは隠すとか。。。)

■一括開閉にチャレンジ!

$('.accordion_all_head').click(function() {
   $('.accordion_head').next().slideToggle();
});

■一番最初だけ開いた状態にチャレンジ!

$('.accordion_head:first').next().show();

■つのアコーディオンを開くと他は閉まるにチャレンジ!

$(document).ready(function(){
    $('.accordion_head').click(function() {
        $('.accordion_head').next().slideUp(); //←ここ追記
        $(this).next().slideToggle();
    }).next().hide();
});

■開いているアコーディオンの色を変えるにチャレンジ!

$(document).ready(function(){
    $('.accordion_head').click(function() {
        //ここから
        if($(this).is(".selected")){
            $(this).removeClass("selected");
        }else {
            $(this).addClass("selected");
        }
        //←ここまで追記
        $(this).next().slideToggle();
    }).next().hide();
});
.selected {
    background:選択中の色;
}
.selected + * {
    background:選択中の色;
}

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress