Webサイトで特定のカテゴリのコンテンツを表示・非表示する「絞り込み（フィルター）リスト」は、ユーザーの利便性を向上させる重要な機能の一つです。本記事では、jQueryを使って、クリックするだけでコンテンツを切り替えられるシンプルなフィルター機能を作成します。
完成イメージ
「A」「B」「C」のボタンをクリックすると、それぞれ対応するコンテンツのみが表示される仕組みです。「ALL」をクリックするとすべてのコンテンツが表示されます。
HTMLの構成
<ul class="filter-nav">
<li class="filter-nav__item show" data-group="">ALL</li>
<li class="filter-nav__item" data-group="a">A</li>
<li class="filter-nav__item" data-group="b">B</li>
<li class="filter-nav__item" data-group="c">C</li>
</ul>
<ul class="filter-contents">
<li class="filter-contents__item" data-group="a">Aの中身です</li>
<li class="filter-contents__item" data-group="b">Bの中身です</li>
<li class="filter-contents__item" data-group="c">Cの中身です</li>
</ul>各ボタン（filter-nav__item）には data-group 属性を付与し、絞り込みの対象となるコンテンツと紐付けています。
CSSの適用
.show {
display: block;
}
.hide {
display: none;
}
.filter-nav__item {
cursor: pointer;
}
.filter-nav__item.show {
cursor: default;
}
/* レイアウト調整 */
.filter-nav,
.filter-contents {
width: 90%;
max-width: 500px;
margin: 0 auto;
}
.filter-nav {
display: flex;
margin-block: 30px 10px;
}
.filter-nav li {
flex: 1;
border: 1px solid #000;
text-align: center;
padding: 10px 0;
font-weight: bold;
}
.filter-nav li:not(:last-child) {
margin-right: 10px;
}
.filter-nav li.show {
background: #000;
color: #fff;
}
.filter-contents {
border: 1px solid #000;
padding: 10px;
}jQueryでの動作実装
var filterNavItem = '.filter-nav__item'; // 絞り込む項目名
var filterContentsItem = '.filter-contents__item'; // 絞り込み対象のコンテンツ
var hideClass = 'hide'; // 絞り込み対象外のclass
var showClass = 'show'; // 選択中のclass
$(function() {
$(filterNavItem).on('click', function() {
$(filterNavItem).removeClass(showClass);
var group = $(this).addClass(showClass).data('group');
search_filter(group);
});
});
function search_filter(group) {
$(filterContentsItem).removeClass(hideClass);
if(group === '') {
return;
}
for (var i = 0; i < $(filterContentsItem).length; i++) {
var itemData = $(filterContentsItem).eq(i).data('group');
if(itemData !== group) {
$(filterContentsItem).eq(i).addClass(hideClass);
}
}
}解説
- クリックイベントの設定
.filter-nav__itemがクリックされると、すべてのボタンからshowクラスを削除し、クリックされたボタンにshowクラスを追加します。
- 選択されたカテゴリに応じたフィルタリング
search_filter(group)関数を実行し、選択されたdata-groupの値に一致しないコンテンツにhideクラスを付与して非表示にします。
- ALLボタンの動作
data-group=""が選択された場合は、すべてのコンテンツを表示します。
まとめ
今回は jQuery を使った簡単な絞り込みリストの作成方法を解説しました。特定のカテゴリのみを表示することで、コンテンツの整理がしやすくなります。
より高度な機能を追加したい場合は、以下のような発展的な実装も考えられます。
- アニメーションの追加（
fadeIn/fadeOut） - 複数条件のフィルタリング
- 検索ボックスとの連携
カスタマイズ次第で、さらに便利なフィルター機能を作ることができます。ぜひ試してみてください！