データ属性で表示する記事を絞り込む

データ属性で、一覧の記事を絞り込むサンプルです。属性を選ぶボタン（category-btn）と絞り込まれる要素（flex-one）の一覧になっています。is-animateクラスは、自分で作成したクラスです。若干不要な記述が入っていますが・・・

• キーワード
• A
• B

これをjQueryを使って絞り込みます。

var $btn = $('.category-btn [data-filter]'),
       $list = $('.category-list [data-category]');
   
$(window).on('load',function(){
    $list.hide().filter('[data-category = "kanto"]').show().addClass('is-animate');
});
	
$btn.on('click', function() {
     var $btnCat = $(this).attr('data-filter');
     $list.removeClass('is-animate');
	$btn.removeClass('is-select');
     if ($btnCat == 'all') {
       $list.show().addClass('is-animate');
		 $(this).addClass('is-select');
     } else {
        $list.hide().removeClass('is-animate').filter('[data-category *= "' + $btnCat + '"]').show().addClass('is-animate');
		 $(this).addClass('is-select');
     }
     return false;
   });