WordPress│リストをアコーディオン表示する方法

2024.04.10

リストブロックをカスタマイズして、アコーディオン表示できるようにしてみました。

アコーディオンブロックを使えば、良いかもしれませんが、

よりお手軽なリスト表示（たとえばスマホは折りたたむ等）をしたかったので作成してみました。

※サンプルをクリックすると展開します。

サンプル

Web制作

WordPressでリストをアコーディオン表示する方法

やり方は簡単です。

CSS+JSを使ってリストブロックを変化させます。

リストの作成

リストブロックから普通のリストを作成しましょう。

Web制作

親のリストを太文字に、さらにlist-accordionというクラスを追加します。

サブメニューにしたい項目は子リストにしておきましょう。

CSSとJSの挿入

まずはCSSから。

/* アコーディオンメニューを非表示にする */
.list-accordion ul {
    display: none;
}

/* アコーディオンがアクティブなときにサブメニューを表示する */
.list-accordion.active ul {
    display: block;
}

/* アコーディオンのスタイル */
.list-accordion, .dropdown li {
    list-style: none;
}
.list-accordion > strong {
    cursor: pointer;
    display: block;
}
.list-accordion > strong::after {
    font-family: icomoon!important;
    content: " \e910";
    position: relative;
    top: 1px;
}
.list-accordion.active > strong::after {
    content: " \e912";
}

JSはfunctions.phpに入れました。

エラーが怖い人はCode Snippetsのプラグインを入れてそこにコードを入れましょう。

function motoki_add_list_accordion_toggle_script() {
	echo <<< EOM
		<script>
		document.addEventListener('DOMContentLoaded', function() {
			var list_accordions = document.querySelectorAll('.list-accordion > strong');

			list_accordions.forEach(function(list_accordion) {
				list_accordion.addEventListener('click', function() {
					this.parentElement.classList.toggle('active');
				});
			});
		});
		</script>
	EOM;
}
add_action('wp_footer', 'motoki_add_list_accordion_toggle_script');

あとは確認するだけです。

JSで折りたたみの表示になっているか確認しましょう。