JSFiddle - React, Tailwind, and code Playground

by lparcerisa

HTML

<section>
    <ul class="portfolio_filters">
        <li><a href="#" data-filter="*">show all</a></li>
        <li><a href="#" data-filter=".new">New Logos</a></li>            
        <!--lightbox2-->
        <li><a href="#" data-filter=".black ">Black & White</a></li>    
        <!--lightbox3-->
        <li><a href="#" data-filter=".industrial">Industrial</a></li>    
        <!--lightbox3-->
        <li><a href="#" data-filter=".mix">Mix</a></li>          
        <!--lightbox4-->
    </ul>
</section>

<img alt="image_black1" class="black">
<img alt="image_black2" class="black">
<img alt="imageABCD" class="">
<img alt="imagelast" class="">

CSS

img{
    border: 1px solid grey;
    padding:5px;
}

JavaScript

$("img").hide();

$("li a").click(function(event){
    event.preventDefault();
    $("img").hide();
    filter = $(this).data("filter");
    if(filter=="*")
        $("img:not(.black)").show();
    else
        $(filter).show();
});