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

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

投稿日: 2015年7月12日2018年8月16日投稿者: kishiken

目次

1 解説
2 HTML
3 CSS
4 jQuery

解説

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

→デモはこちら

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

HTML

<div class="main">
    <h1>slideToggleを使ったアコーディオンメニュー</h1>
    <h2>Q＆Ａ風メニューを作成しました。</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");
  });
});