jQuery アコーディオンメニュー縦一覧の一部非表示の方法

Question

前提・実現したいこと

ｊQueryを使用してアコーディオンメニューでのFAQセクションを作っています。
4行目以下を初期段階で非表示にし、「他の質問を見る」ボタンを押すことで4,5行目を非表示→表示されるようにしたいのですがうまくいきません。

該当のソースコード

【HTML】
<div class="txt">

  <input type="checkbox" id="faq1" class="faq_hidden">
  <label for="faq1" class="faq_open">質問１</label>
  <label for="faq1" class="faq_close">
     <p><strong>A. </strong>回答１</p>
  </label>

  <input type="checkbox" id="faq2" class="faq_hidden">
  <label for="faq2" class="faq_open">質問２</label>
  <label for="faq2" class="faq_close">
    <p><strong>A. </strong>回答２</p>
  </label>

   <input type="checkbox" id="faq3" class="faq_hidden">
   <label for="faq3" class="faq_open">質問３</label>
   <label for="faq3" class="faq_close">
    <p><strong>A. </strong>回答３</p>
   </label>

  <input type="checkbox" id="faq4" class="faq_hidden">
  <label for="faq4" class="faq_open">質問４</label>
  <label for="faq4" class="faq_close">
    <p><strong>A. </strong>回答４</p>
  </label>

  <input type="checkbox" id="faq5" class="faq_hidden">
  <label for="faq5" class="faq_open">質問５</label>
  <label for="faq5" class="faq_close">
    <p><strong>A. </strong>回答５</p>
  </label>

<p class="more">他の質問を見る</p>

</div>

【CSS】（必要そうな部分のみ抜粋）

.faq_hidden {
display: none;
}

.faq_open {
display: block;

.faq_close {
display: block;
height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
}

.faq_hidden:checked + .faq_open + .faq_close {
height: auto;
opacity: 1;
padding: 10px;
}

試したこと

ネット上で見つけた以下記述を参考に試みましたが、参考はリストアイテムに適用だったので勝手が違い躓きました。
$(function () {
let hideFaq = '.faq_hidden li:nth-of-type(n+4)';
$(hideFaq).hide();
$('.moreBtn').click(function () {
$(hideFaq).toggle();
if ($(hideFaq).css('display') == 'none') {
$('.moreBtn').text('他の質問を見る');
} else {
$('.moreBtn').text('CLOSE');
}
return false;
});
});

Answer 1

jQueryのセレクタが間違ってますね。
CSSセレクタについて勉強しなおしましょう。

$(function () {
  let hideFaq = '.txt > label:nth-of-type(n+5)';
  $(hideFaq).hide();
  $('.more').click(function () {
    $(hideFaq).toggle();
    if ($(hideFaq).css('display') == 'none') {
      $('.more').text('他の質問を見る');
    } else {
      $('.more').text('CLOSE');
    }
    return false;
  });
});

追記

toggleでアニメーションさせる場合、.toggle(時間, コールバック関数) とすると、アニメーション終了後にコールバック関数が実行される。

$(function () {
  let hideFaq = '.txt > label:nth-of-type(n+5)';
  $(hideFaq).hide();
  $('.more').click(function () {
    $(hideFaq).toggle(1000, function() {
      if ($(hideFaq).css('display') == 'none') {
        $('.more').text('他の質問を見る');
      } else {
        $('.more').text('CLOSE');
      }
      return false;
    });
  });
});

Comments

[gmgmynt]

jQueryの部分は参考にしたものを貼っただけなのでセレクタは触っていませんでしたが、
自分で記述していたものとは一部違ったので復習が必要な箇所ではありますね。
動きを滑らかにするために.toggle()に数値を入れると（fadeToggleも同様）、開いて閉じた時のボタン文字が「CLOSE」から戻らない状態になり未だ格闘中ですが、大方希望していた動作になっているので大変助かりました。ありがとうございます。

[hatena19]

アニメーション後に 'display' の判断をする必要があります。
サンプルコードを回答に追記しておきました。

[gmgmynt]

なるほど。処理の順番がポイントになるんですね。ありがとうございます！