Result

Todo:余計なコードがあります。もっと短く出来ますね。

jQuery

$(document).ready(function() {
    //a要素をクリックでイベント発火
    $('ul#filter a').click(function() {
        $(this).css('outline','none');
        $('ul#filter .current').removeClass('current');
        $(this).parent().addClass('current');

        //小文字/大文字の処理
        var filterVal = $(this).text().toLowerCase().replace(' ','-');
                
        if(filterVal == 'all') {
             //マッチしない要素を隠す
            $('ul#portfolio li.hidden').slideDown('slow').removeClass('hidden');
        } else {
            $('ul#portfolio li').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).slideUp('normal').addClass('hidden');
                } else {
                    $(this).slideDown('slow').removeClass('hidden');
                }
            });
        }
        return false;
    });
});

css

div#container { margin: 20px auto 0; overflow: hidden; width: 640px; }

ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 0; width: 100%; }
ul#filter li { 
    border-right: 1px solid #dedede;
    float: left;
    line-height: 16px;
    margin-right: 10px;
    padding-right: 10px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }

ul#portfolio { float: left; list-style: none; margin-left: 0; width: 672px; }
ul#portfolio li { 
    border: 1px solid #dedede; 
    float: left; 
    margin: 0 10px 10px 0; 
    padding: 5px;
    width: 102px;
    background:#f7f7f7;
}
ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { border: 1px solid #dedede; display: block;  }

html

<div id="container">
    <ul id="filter">
        <li class="current"><a href="#">All</a></li>
        <li><a href="#">red</a></li>
        <li><a href="#">yellow</a></li>
        <li><a href="#">black</a></li>
    </ul>
    <ul id="portfolio">
        <li class="red xmas"><a href="#"><img src="red.jpg" /></a></li>
        <li class="yellow"><a href="#"><img src="yellow.jpg" /></a></li>
        <li class="red xmas"><a href="#"><img src="red.jpg" /></a></li>
　　　　　　　　　　～
        <li class="yellow"><a href="#"><img src="yellow.jpg" /></a></li>
        <li class="black"><a href="#"><img src="black.jpg" /></a></li>
    </ul>
</div>

via

Creating a “Filterable” Portfolio with jQuery

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.32-2/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7