【アコーディオンメニュー】1つ開くと他は閉じる場合

アコーディオンメニューを開くと、他の開いていたアコーディオンメニューは閉じる場合のサンプルです。

html、CSSのコードは下記の記事と同様です。
開くボタン・閉じるボタンを1つの画像で使いまわす仕様です。

【アコーディオンメニュー】開くボタン・閉じるボタンを1つの画像の回転で実装する場合

アコーディオンメニューの開くボタン・閉じるボタンを1つの画像で実装しています。開くボタンは下向き矢印の画像、閉じるボタンは開くボタンをCSSで180度回転させた上向き矢印の画像です。

tech.brick-plan.jp

2019.07.17

jQueryのコードです。
タイトルをクリックでタイトルのpタグにクラス名selectedを付与、再度タイトルをクリックでクラス名selectedを削除しています。
ポイントはnotメソッドでクリックした以外のタイトルのpタグを対象に、クラス名selectedの削除とコンテンツのpタグにslideUpメソッドを実行している箇所です。
なお、slideUpは元々アコーディオンメニューが閉じていれば何も起きません。同様にremoveClassもクラス名selectedが付与されていなければ何も起きません。

$(function(){
	$('.toggle_title').on('click',function() {
		$(this).toggleClass('selected');
		$(this).next().slideToggle();
		$('.toggle_title').not($(this)).next().slideUp();
		$('.toggle_title').not($(this)).removeClass('selected');
	});
});