アコーディオンの実装方法

Maki

◆HTML

<body>
 <div class="faq-wrapper">
    <div class="container">
      <div class="heading">
        <h2>FAQ</h2>
      </div>
      <div class="faq">
        <ul id="faq-list">
          <li class="faq-list-item">
            <h3 class="question">Progateの公式キャラクターはなんですか？</h3>
            <span>+</span>
            <div class="answer">
              <p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p>
            </div>
          </li>
          <li class="faq-list-item">
            <h3 class="question">にんじゃわんこはオスですか？それともメスですか？</h3>
            <span>+</span>
            <div class="answer">
              <p>にんじゃわんこはオスです。</p>
            </div>
          </li>
          <li class="faq-list-item">
            <h3 class="question">にんじゃわんこは何歳ですか？</h3>
            <span>+</span>
            <div class="answer">
              <p>にんじゃわんこは14歳です。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

ポイント
＊３つの質問部分には同一のclass名を付与

◆CSS

.container {
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.faq-wrapper {
  background-color: #e6ecf0;
  text-align: center;
  padding-bottom: 80px;
  color: #5f5d60;
}

#faq-list {
  width: 500px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.faq-list-item {
  margin:10px;
  border-bottom:1px solid #ccc;
  position:relative;
  cursor:pointer;
  text-align: left;
}

.faq-list-item h3 {
  font-size: 14px;
}

.faq-list-item span {
  position:absolute;
  top:0;
  right:5px;
  color:#ccc;
  font-size:13px;
}

.answer {
  font-size: 12px;
  padding: 5px 0px;
  margin-bottom: 15px;
  display:none;
}

ポイント
＊答えの部分はCSSで非表示にする。

◆JQuery

$(function() {
$('.faq-list-item').click(function(){
    var $answer = $(this).find('.answer');
    if($answer.hasClass('open')){
      $answer.removeClass('open');
      $answer.slideUp();
      $(this).find('span').text('+');
    }else{
      $answer.addClass('open');
      $answer.slideDown();
      $(this).find('span').text('-');
    }
  });
});

ポイント
＊答えの表示・非表示は以下のようにif文を用いて行います。質問をクリックした時に、$('.answer')がすでにopenクラスを持っていれば、（質問の答えが現在表示されていると判断できるので）openクラスを外し、答えを隠します。openクラスがない場合はその逆です。

この記事が気に入ったらサポートをしてみませんか？