UNIRRY

WEBデザインとホロスコープと宇宙のブログ

FAQなどの複数箇所にわたる開閉コンテンツを自作する

openclose2

前にフラグをたてて変更する開閉コンテンツについて記載したのですが、複数合った場合は、フラグでは対応が難しいので、開閉箇所が複数あった場合についてを記載します。

つくるのは、①押したらとにかく開く ②一回押したやつはもう一回押したら閉じる ③全部をとじるボタンで全部とじる ④全部をひらくボタンで全部ひらく とします。

まずは普通にhtml

ddのなかの回答部分をspanで囲うのは開くときの高さを回答の高さにあわせて調整するためです。

<div id="allopen">全部ひらくボタン</div>
<div id="allclose">全部とじるボタン</div>

<!-- aq一覧 -->
<div id="qa">
<dl>
<dt>__質問__<span>開くボタン</span></dt>
<dd><span>__回答__</span></dd>
</dl>
<dl>
<dt>__質問__<span>開くボタン</span></dt>
<dd><span>__回答__</span></dd>
</dl>
<dl>
<dt>__質問__<span>開くボタン</span></dt>
<dd><span>__回答__</span></dd>
</dl>
</div>
<!-- aq一覧 -->

cssで開閉の原型を設定する

#qa dt {
position: relative;
padding: 10px;
}
#qa dt span {
position: absolute;
top: 10px;
right: 10px;
}
#qa dd {
padding: 10px;
height: 0; /* ここでもとの高さを0にしとく */
}
#qa dt,
#allopen,
#allclose {
cursor: pointer;
display: block;
}

開閉させるjsを組む

前はfalseとtrueのフラグをたてて開閉をさせましたが、開閉箇所が複数ある場合は、selectedのクラスを付与することで実行します。

// dd内のspanの高さを取得する用の変数
var ddheight;

// qaのdtクリックで開閉の設定
$("#qa dt").click(function(){

    // ddにすでにselectedクラスがあるものは削除、ないものは付与する
    if ( $(this).next().is(".selected") ) {
        $(this).next().removeClass("selected");
    } else {
        $(this).next().addClass("selected");
    }

    // ddにselectedがついている時は開く、ないときは閉じる
    if ( $(this).next().is(".selected") ) {
        ddheight = $(this).next().children("p").height() + 20;
        $(this).next().animate({"height": ddheight}, 400, "easeOutQuart");
    } else {
        $(this).next().animate({"height": "0px"}, 400, "easeOutQuart");
    }

});

// すべて閉じるボタンを押したときの挙動
$("#allclose").click(function(){
    $("#qa dd").animate({"height": "0px"}, 400, "easeOutQuart").removeClass("selected");
});

// すべて開くボタンを押したときの挙動
$("#allopen").click(function(){
    $("#qa dd").each(function(i){
      ddheight = $(this).children("span").height() + 20;
      $(this).animate({"height": ddheight}, 400, "easeOutQuart").addClass("selected");
    });
});

FAQなどの複数ある箇所を開閉するサンプルはこちら

サンプル

fqa01


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3