クリックしたらドローダウンする

Q&Aとかによくあるアレです。
「Q」のテキストをクリックしたら、下から「A」のテキストがにょろっと出てくるアレです。

まずはHTML（書き方は様々なので一例です）

      <div class="q_a-list">
  
        <div class="p-q_a-list-item">
          <div class="q_a-list-item-text type_q">「Q」のテキスト</div>
          <div class="q_a-list-item-text type_a">「A」のテキスト</div>
        </div>
  
        <div class="p-q_a-list-item">
          <div class="q_a-list-item-text type_q">「Q」のテキスト</div>
          <div class="q_a-list-item-text type_a">「A」のテキスト</div>
        </div>

        <div class="p-q_a-list-item">
          <div class="q_a-list-item-text type_q">「Q」のテキスト</div>
          <div class="q_a-list-item-text type_a">「A」のテキスト</div>
        </div>

      </div>

次にJavaScript（jQuery）

$(function(){
    $('.q_a-list-item-text.type_a').hide();
    $('.q_a-list-item-text.type_q').click(function(){
        $(this).next('.q_a-list-item-text.type_a').slideToggle();
    });
});

「.q_a-list-item-text.type_q」をクリックしたら「.q_a-list-item-text.type_a」を出現させよ！って感じです。
「$(‘.q_a-list-item-text.type_a’).hide(); 」は、「Q」がクリックされるまで「A」を隠しておくって指示ですね。

CSSはお好みなので省きますー。