【jQuery】親・子・孫関係がある場合のslideToggle()

Question

こちらのおかげで親・子・孫関係のチェックボックスの実装が出来ました。
親のON・OFFで子と孫を連動、子のON・OFFで孫を連動しました。

ここまでは良かったのですが、以下の手順で操作すると意図した表示になりません。

１．親（本）をONにする→子・孫がONの状態で表示される。
２．子（コミック）をOFFにする→孫が全てOFFの状態、トグルで隠れる。
３．この状態で親（本）をOFFにする→子が全てOFFの状態、トグルで隠れる。
４．再び親（本）をONにする→１の状態で表示したいが、子までしか表示されない。

作りの問題だと思っていますが、４の時に１と同じく孫まで表示したいのですが分かりません。。。
どのような方法があるでしょうか？

宜しくお願い致します。

<p><input type="checkbox" id="book" value="01"/>本 </p>
	<div id="book-group">
		<input type="checkbox" id="comic" value="001"/>コミック</p>
			<div id="comic-group">
				<p><input type="checkbox" name="books[]" value="1" id="1"/>ドラゴンボール </p>
				<p><input type="checkbox" name="books[]" value="2" id="2"/>ジョジョの奇妙な冒険 </p>
				<p><input type="checkbox" name="books[]" value="3" id="3"/>幽遊白書 </p>
			</div>
		<input type="checkbox" id="novel" value="002"/>小説</p>
			<div id="novel-group">
				<p><input type="checkbox" name="books[]" value="4" id="4"/>ソロモンの偽証 </p>
				<p><input type="checkbox" name="books[]" value="5" id="5"/>火花 </p>
				<p><input type="checkbox" name="books[]" value="6" id="6"/>コーヒーが冷めないうちに </p>
			</div>

		<input type="checkbox" id="magazine" value="003"/>雑誌</p>
			<div id="magazine-group">
				<p><input type="checkbox" name="books[]" value="7" id="7"/>VERY </p>
				<p><input type="checkbox" name="books[]" value="8" id="8"/>sweet </p>
			</div>
	</div>

// ページ読み込み完了後に実行
$(window).load(function(){

	//初期表示は全て非表示
	 $('[id*=group]').css("display", "none");

});



$(function(){

	$("input").click(function () {


		//クリックされたチェックボックスのグループ名を取得
		var groupName = $(this).attr("id") + 'group';

		//グループ内のチェックボックスを取得
		var targets = $("#" + groupName).find("input");

		if(this.checked){
			targets.prop('checked', true);

		}else{
			targets.prop('checked', false);

		}

		//トグル
		$("#" + groupName).slideToggle();




	});
});

Answer 1

自分の下位は全部開かせる場合。

$( '#' + groupName ).slideToggle().find( '#' + groupName + '[id$="group"]' ).slideDown();

書かれたコードではここが問題で動かなかった。ちなみに<p>が数箇所足りません。

var groupName = $(this).attr("id") + '-group'; // 「-」が無かった

---

追記：

ミスを指摘しながら書きミスしていました、すいません。

$( '#' + groupName ).slideToggle().find( '[id$="group"]' ).slideDown();

動くサンプル https://jsfiddle.net/nfwnzszx/

Comments

[pecchan]

有難う御座います。

以下記載ミスでした。すみません。
・<p>足りない
・'group'ではなく'-group'

教えていただいた、find()で自分の下位を操作する方法、
試しましたが動き変わらずでした・・・。

[kei344]

すいません、ミスがあったので回答に追記しました。

[pecchan]

とんでもないです。
度々すみませんでした。

有難う御座います。