【アコーディオンメニュー】最初のアコーディオンメニューのみ開いた状態でページを表示

最初のアコーディオンメニューのみ開いた状態でページを表示します。アコーディオンメニューの開くボタン・閉じるボタンはCSSのみで作成しています。

htmlのコードは下記の記事と同様になります。CSSもページ表示時に最初のアコーディオンメニューのみ展開する部分以外は下記の記事と同様です。

【アコーディオンメニュー】開くボタン・閉じるボタンをCSSのみで作成【プラス・マイナス編】

アコーディオンメニューの開くボタン・閉じるボタンをCSSのみで作成しています。形状は開くボタンがプラス（＋）、閉じるボタンがマイナス（－）です。画像は使用していません。
サンプルはメインメニュー・サブメニューのナビゲーションです。

tech.brick-plan.jp

2019.07.17

CSSのコードに以下を追加します。サブメニューのddタグは非表示にしていますが、最初のサブメニューのddタグのみ表示に変更します。

.toggle_contents:first-of-type dd {
	display: block;
}

jQueryのコードです。メインメニュークリック時dtタグにクラス名selectedを付与しますが、最初のメインメニューのみページ表示時にクラス名selected付与に変更します。これで最初のアコーディオンメニューはページ表示時に閉じるボタンが表示されます。

$(function(){
	$('.toggle_title:first').addClass('selected');
	$('.toggle_title').click(function(){
		$(this).toggleClass('selected');
		$(this).next().slideToggle();
	});
});