サイドバーのカテゴリを動的にアコーディオンにする方法

WordPressのサイドバーのカテゴリに子カテゴリが含まれている場合にプラグインなしで動的にアコーディオンにさせる方法を

javascriptとjqueryで書いてみました。

javascriptはこちら。

let targetNode = document.getElementsByClassName('children');
		
const arr = Array.from(targetNode);

		arr.forEach( ul => {
			let parent = ul.parentElement;
			
			parent.classList.add('cat');
			ul.parentNode.addEventListener('click', () => {
				ul.parentNode.classList.toggle('on');
				
			});
		
		});

結果はこちら。

See the Pen Untitled by J&SadaKo (@green555) on CodePen.

jQueryはこちら。

$(function(){
	
	$('.children').parent('li').addClass('cat');
	
		$('.cat').on('click', function(){
			$(this).children('ul').slideToggle(200);
			$(this).toggleClass('on');
		});
	
    });

結果がこちら。

See the Pen Untitled by J&SadaKo (@green555) on CodePen.

このブログのサイドバーのカテゴリをアコーディオンにしました。

Cocoonの場合ですが、サイドバーにカテゴリーを設定した場合は、

階層を表示にチェックを入れることを忘れずに！そうしないと子階層は表示されませんのでご注意を。

上で書いたCSSはアコーディオンの動きを分かりやすくするためにステイルを足しているので、

実際には、

外観＞テーマファイルエディターに加えたスタイルシートに以下のCSSを追加しました。

注意：ID名や構成が同じではない可能性があるので、開発ツールで確認してくださいね。

#categories-2 li.cat {
		position: relative;
	}
	#categories-2 li.cat:after {
		position: absolute;
		content: '+';
		right: 10px;
		top: 5px;
		font-size: 20px;
		transition: transform .3s;
	}
	
	#categories-2 li.cat.on:after {
		transform: rotate(45deg);
	}
	
	 #categories-2 li.cat ul.children{
		 display:none;
		 transition: .2s cubic-bezier(1, 0.06, 1, 1);
		 
	 }
	 
	 #categories-2 li.cat.on ul.children {
		 display: block;
		 
	 }

jQueryは上と同じです。外観>テーマファイルエディターのjsファイルに以下を記述します。

	$('.children').parent('li').addClass('cat');
	
		$('.cat').on('click', function(){
			$(this).children('ul').slideToggle(200);
			$(this).toggleClass('on');
		});