slideUp,slideDownを使ったシンプルな例 : jQuery

Tweet

Pocket

slideUp,slideDownを使ったシンプルなサンプルを作成。

»Demo

$(function() {
    var handles = $('dl#accordion dt');
    $(handles).each(function(i){
        $(handles[i]).click(function () {
            // 他のスライドを閉じる
            $(handles).each(function(j) {
                if (i !== j) {
                    var ddElem =  $(this).next();
                    $(ddElem).slideUp('slow');
                }
            });
            // スライドを開く
            var elem = $(this).next();
            if (elem.css('display') == "none") {
                $(elem).slideDown('slow');
            }
        });
    });
    var closeButton = $('div.closeButton');
    $(closeButton).each(function(i){
        $(this).click(function(){
            var parentElem = $(this).parent();
            parentElem.slideUp('slow');
        });
    });
});

dl#accordion {
    width: 500px;
    padding: 0;
}
dl#accordion dt {
    clear: both;
    padding: 5px;
    margin: 5px 0 0 0;
    color: #fff;
    background: #000;
    cursor: pointer;
}
dl#accordion dd {
    position: relative;
    display: none;
    padding: 10px;
    margin: 0;
    border: 3px solid #ddd;
}
#accordion div.closeButton {
    margin: 8px 5px;
    text-align: right;
    cursor: pointer;
}

<dl id="accordion">
<dt><div class="handle">見出し1(クリック)</div></dt>
<dd>
    <div class="closeButton">閉じる</div>
    <div class="text">
        <p>
           Nullam ut enim tortor. Integer sodales nisl nec metus accumsan ultrices. Duis blandit varius urna et rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <p>
            Phasellus volutpat mi purus, eu fermentum velit. Suspendisse porta euismod nisi, sit amet placerat tortor aliquam non. Integer nec feugiat massa. Mauris non velit eros.

        </p>
   </div>
</dd>
<dt><div class="handle">見出し2(クリック)</div></dt>
<dd>
    <div class="closeButton">閉じる</div>
    <div class="text">
        <p>
           Nullam ut enim tortor. Integer sodales nisl nec metus accumsan ultrices. Duis blandit varius urna et rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <p>
            Phasellus volutpat mi purus, eu fermentum velit. Suspendisse porta euismod nisi, sit amet placerat tortor aliquam non. Integer nec feugiat massa. Mauris non velit eros.
        </p>
   </div>
</dd>
<dt><div class="handle">見出し3(クリック)</div></dt>
<dd>
    <div class="closeButton">閉じる</div>
    <div class="text">
        <p>
           Nullam ut enim tortor. Integer sodales nisl nec metus accumsan ultrices. Duis blandit varius urna et rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <p>
            Phasellus volutpat mi purus, eu fermentum velit. Suspendisse porta euismod nisi, sit amet placerat tortor aliquam non. Integer nec feugiat massa. Mauris non velit eros.
        </p>
   </div>
</dd>
</dl>