IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

[jQuery] よくあるご質問などで使えるスライド

Result

jQuery

$(function(){
    $(".open").click(function(){
        $(this).next(".slideContent").slideToggle("slow");
    });
});

css

.open {
    background-color: #FFCC33;
    padding: 8px;
    margin-bottom: 10px;
    cursor: pointer;
}
.slideContent {
    display: none;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
}

.slideContentdisplay: none;としておきます。あとは見た目の調整です。
.opencursor: pointer;しておくと親切だと思います。

HTML

<div class="slideBox">
    <div class="open">
        ここをクリックするとスライドして開きます。
    </div>
    <div class="slideContent">
        コンテンツをここに記述します。<br>
        もちろんHTMLを記述できるので何だって表現できます。<br>
        もう一度クリックするとスライドを閉じます。
    </div>
</div>