【jQuery】アコーディオン機能

①答えの部分はCSSで非表示にします。②3つの質問部分には同一のclass名を付与し、③それらのclickイベントを作ります。質問をクリックした時に、対応する答えを隠すのか表示するのかを判断するため、下図のようにopenというclassを用います。答えの表示中はopenをつけ、非表示中は外します。

hasClassメソッド

hasClassメソッドは、引数に指定したクラスを、オブジェクトが持っているか判定するときに使用します。オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返します。

  // 「.faq-list-item」のclickイベントを作成してください
  $('.faq-list-item').click(function(){
    
    //変数の定義： var $変数名 = $('div');
    //変数 $answer = .answerがついたクラスを取得する
    var $answer = $(this).find('.answer');
    
    
    //もし〜なら
    if( $answer.hasClass('.open')) {
      
      //オープンさせる（openを取り除く）
      $answer.removeClass('open');
      
    } else { //ちがうなら〜
    
      //オープンさせない（openを追加する）
      $answer.addClass('open');      
    }
    
  });

間違えた箇所

• 変数定義の仕方は「var $変数名 = $('div');」
• 決まった変数はカッコで囲まない

  // FAQのアコーディオン
  $('.faq-list-item').click(function() {
    var $answer = $(this).find('.answer');
    if($answer.hasClass('open')) { 

      //Clickされたら非表示設定の.openを外して表示させる
      $answer.removeClass('open');
      
      // slideUpメソッドを用いて、$answerを隠す動きをつける
      $answer.slideUp();

      // 子要素のspanタグの中身をtextメソッドで書き換える
      $(this).find('span').text('+');

      
    } else {  // .openを持ってないなら〜
      $answer.addClass('open'); 
      // ClickされたらslideUpメソッドを用いて、$answerを表示させる
      $answer.slideDown();
      
      // 子要素のspanタグの中身をtextメソッドで書き換える
      $(this).find('span').text('-');      
      
    }
  });