【jQuery】FAQアコーディオンの作成方法

完成形

• SCSSを使用
• jQueryを使用

See the Pen abJKBrL by c-koch0514 (@c-koch0514) on CodePen.

HTML

html

<section id="faq">
  <dl id="faq-item">
    <dt class="question">
      <p class="question-text">質問１</p>
      <p class="plus">+</p>
    </dt>
    <dd class="answer">回答１</dd>
    <dt class="question">
      <p class="question-text">質問２</p>
      <p class="plus">+</p>
    </dt>
    <dd class="answer">回答２</dd>
    <dt class="question">
      <p class="question-text">質問３</p>
      <p class="plus">+</p>
    </dt>
    <dd class="answer">回答３</dd>
  </dl>
</section>

SCSS

scss

/***********************************************************************/
/**********                FAQの全体                       *************/
/***********************************************************************/
# faq {
  #faq-item {
    width: 250px;
    margin: 0 auto;
    background-color: #eee;
    font-size: 15px;
    cursor: pointer;

    .question {
      display: flex;
      justify-content: space-between;
    }

    .answer {
      display: none;
    }
  }
}
/***********************  ena of faq    ********************************/

jQuery

jQuery

$(function(){  

  /***************** FQAアコーディオン **********************/
  $('.question').on('click', function () {
    $(this).next().slideToggle();

    if( $(this).hasClass('close')){ 
      $(this).find('.plus').text("+");
    }
    else{
      $(this).find('.plus').text("－");
    }
    $(this).toggleClass('close');
  });
  /*********************************************************/

});