解説
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"); }); });