【アコーディオンメニュー】コンテンツを絞り込み検索して表示

PC表示でマウスオーバーで展開するプルダウンメニュー、スマホ表示でアコーディオンメニューを使ってコンテンツの絞り込み検索をします。絞り込み検索の条件はカスタムデータ属性の一致を利用します。

メニュー部分のCSSとjQueryは下記の記事と同様です。コンテンツ非表示用のCSSと絞り込み検索用のjQueryのみ追加で実装します。

htmlのコードは下記になります。
メニューのaタグに任意のカスタムデータ属性を追加します。今回はdata-filter=”カテゴリ名”とします。「全て」のaタグのみdata-filter=””にします。
表示するコンテンツのdivタグ側にも任意のカスタムデータ属性を追加します。今回はメニューのaタグ同様data-filter=”カテゴリ名”とします。

<ul class="dropmenu">
	<li id="js_cat"><a>カテゴリー</a>
		<ul>
			<li><a data-filter="">全て</a></li>
			<li><a data-filter="cat01">アコーディオンメニュー</a></li>
			<li><a data-filter="cat02">カレンダー</a></li>
			<li><a data-filter="cat03">タブメニュー</a></li>
			<li><a data-filter="cat04">ツールチップ</a></li>
			<li><a data-filter="cat05">フェーダー</a></li>
			<li><a data-filter="cat06">フォーム</a></li>
			<li><a data-filter="cat07">マウスオーバー</a></li>
			<li><a data-filter="cat08">モーダルウィンドウ</a></li>
			<li><a data-filter="cat09">レスポンシブ</a></li>
		</ul>
	</li>
</ul>

<div class="cat_image_all">
	<div class="cat_image" data-filter="cat08">
		<a href="/modal/modal-pattern05/">
		<img src="modal-pattern05.png" alt="">
		<p class="page_title">【モーダルウィンドウ】jquery.magnific-popup.jsを利用してYouTubeの動画を再生</p>
		</a>
	</div>
	<div class="cat_image" data-filter="cat05">
		<a href="/fade/fade-pattern11/">
		<img src="fade-pattern11.png" alt="">
		<p class="page_title">【フェーダー】左から右へカーテンを開くように画像を順番に表示</p>
		</a>
	</div>
	<div class="cat_image" data-filter="cat08">
		<a href="/modal/modal-pattern04/">
		<img src="modal-pattern04.png" alt="">
		<p class="page_title">【モーダルウィンドウ】プラグインを利用してhtml内のソースを表示【jquery.magnific-popup.js】</p>
		</a>
	</div>
</div>

続いてCSSのコードです。
コンテンツのdivタグにクラス名is-hideが付与された時のみ、display: noneにします。

.cat_image.is-hide {
	display: none;
}

最後にjQueryのコードです。
メニューのaタグがクリックされた時の動作になります。まずdataメソッドを利用してカスタムデータ属性の値を変数groupに格納し、関数search_filterへ値を渡します。
関数search_filterでは一度コンテンツのdivタグ全てからクラス名is-hideを削除して、全てのコンテンツを表示状態にします。そして変数groupが空の場合、つまりメニューのaタグのカスタムデータ属性が空の場合のみ、returnで関数を抜けて全てのコンテンツの表示状態を維持します。変数groupが空でなかった場合は変数groupとコンテンツのdivタグのカスタムデータ属性を比較して、一致しない場合のみコンテンツのdivタグにクラス名is-hideを付与して非表示にします。

var searchItem = '.dropmenu li ul li a';
var listItem = '.cat_image';
var hideClass = 'is-hide';

$(function() {
	function search_filter(group) {
		$(listItem).removeClass(hideClass);
		if(group === '') {
			return;
		}
		for (var i = 0; i < $(listItem).length; i++) {
			var itemData = $(listItem).eq(i).data('filter');
			if(itemData !== group) {
				$(listItem).eq(i).addClass(hideClass);
			}
		}
	}
	$(searchItem).on('click', function() {
		var group = $(this).data('filter');
		search_filter(group);
	});
});
タイトルとURLをコピーしました