スマホサイトに重宝するslideToggleを使ったアコーディオンメニュー

解説

jQueryのslideToggleを使った超シンプルなアコーディオンメニューです。 Q&A風メニューを作成しました。 Questionをクリックすると、Answerが展開します。背景の開閉アイコンも同時に変わります。

→デモはこちら

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

HTML

<div class="main">
    <h1>slideToggleを使ったアコーディオンメニュー</h1>
    <h2>Q&A風メニューを作成しました。</h2>
    <p class="para">Questionをクリックすると、Answerが展開します。背景の開閉アイコンも同時に変わります。</p>
    <dl class="qa">
        <dt class="question">Q.質問1</dt>
        <dd class="answer">A.回答1
            <br> こちらに回答が入ります。
        </dd>
        <dt class="question">Q.質問2</dt>
        <dd class="answer">A.回答2
            <br> こちらに回答が入ります。
        </dd>
        <dt class="question">Q.質問3</dt>
        <dd class="answer">A.回答3
            <br> こちらに回答が入ります。
        </dd>
    </dl>
</div>

CSS

.main {
    width: 960px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 50px;
    margin: 0 auto;
    vertical-align: top;
    text-align: center;
}
.para {
    padding: 0 0 20px 0
}
.qa {
    margin: 0px auto;
    width: 600px;
    text-align: left;
}
.qa .question {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: #ccc 1px solid;
    cursor: pointer;
    position: relative;
    padding: 0 0 0 10px;
}
.qa .question:after {
    content: "";
    position: absolute;
    top: 15px;
    right: 10px;
    display: block;
    width: 20px;
    height: 20px;
    background: url(images/add.png) no-repeat;
    background-size: contain;
}
.qa .active:after {
    content: "";
    position: absolute;
    top: 15px;
    right: 10px;
    display: block;
    width: 20px;
    height: 20px;
    background: url(images/minus.png) no-repeat;
    background-size: contain;
}
.qa .answer {
    background: #ccc;
    width: 100%;
    height: auto;
    border: #ccc 1px solid;
    display: none;
    padding: 0 0 0 10px;
}

jQuery

$(function(){
  $(".qa .question").on("click", function() {
    $(this).next().slideToggle();
    $(this).toggleClass("active");
  });
});

 

人気記事ランキング

投稿者:

kishiken

企業務めのWEBデザイナーです。