アコーディオンメニューがうまくできない

Question

アコーディオンメニューがうまく機能しません。

学習サイトのProgateの記述を模倣して作成したつもりですがうまく動きません。

動かない原因を知りたいです。
以下のコードは抜粋ですが、JQueryの設定はきちんとできています。

      <ul>
        <li class="acordion-parent">
          <a href="#">リスト1　アコーディオン化<span>+</span></a>
        </li>
          <ul class="acordion">  
            <li>子リスト</li>
            <li>子リスト</li>
            <li>子リスト</li>
          </ul>
        <li>リスト2</li>
        <li>リスト3</li>
      </ul>

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

Answer 1

簡易な修正だとこんな感じでしょうか？
修正箇所は以下2か所です。

①2行目：findは子要素を探索します。$(this)はliタグを指示しているので兄弟のaccordionは探せないため1つ親（parent()）からfindしております。

②slideDownとslideUpが逆です

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

Comments

[Oisan]

ありがとうございました。

実装できました。親子関係見抜けてなかったです。

大変助かりました！