JSFiddle - React, Tailwind, and code Playground

by Damien_at_SF

HTML

<div id="content">
    <h2>PHOTOS</h2>
    <hr />
    <p align="left"><a id="show_promo">PROMO</a> <a id="show_studio">STUDIO</a> <a id="show_live">LIVE</a></p>
    <div id="promo" class="current">
        <p align="center">PROMO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="studio">
        <p align="center">STUDIO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="live">
        <p align="center">LIVE</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
</div>

CSS

#studio {
    display:none;
}
#live {
    display:none;
}

JavaScript

$('p a').click(function(){
        
        var id = $(this).html().toLowerCase();
              
        $('.current').fadeOut(600, function(){
            $('#'+id).fadeIn(600);
            $('.current').removeClass('current');
            $('#'+id).addClass('current');
            
        });
        
    });