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

前提・実現したいこと

ｊ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;
});
});

行動規範の内容に同意します

回答1件

ベストアンサー

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

js
1$(function () {
2  let hideFaq = '.txt > label:nth-of-type(n+5)';
3  $(hideFaq).hide();
4  $('.more').click(function () {
5    $(hideFaq).toggle();
6    if ($(hideFaq).css('display') == 'none') {
7      $('.more').text('他の質問を見る');
8    } else {
9      $('.more').text('CLOSE');
10    }
11    return false;
12  });
13});

追記

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

js
1$(function () {
2  let hideFaq = '.txt > label:nth-of-type(n+5)';
3  $(hideFaq).hide();
4  $('.more').click(function () {
5    $(hideFaq).toggle(1000, function() {
6      if ($(hideFaq).css('display') == 'none') {
7        $('.more').text('他の質問を見る');
8      } else {
9        $('.more').text('CLOSE');
10      }
11      return false;
12    });
13  });
14});

投稿2021/09/20 06:08

編集2021/09/20 12:47

hatena19

総合スコア34075

gmgmynt

2021/09/20 11:13

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