JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<div id="switchGal">
    <p></p>
</div>
<div id="gallery">
    <div id="big">
        <img src="images/gal/start.jpg" alt="Старт" />
    </div>
    <div id="small"> <a href="images/gal/1.jpg"><img src="images/gal/1_mini.jpg" alt="Миниатюра 1" /></a> 
        <a
        href="images/gal/2.jpg">
            <img src="images/gal/2_mini.jpg" alt="Миниатюра 2" />
            </a> <a href="images/gal/3.jpg"><img src="images/gal/3_mini.jpg" alt="Миниатюра 3" /></a> 
            <a
            href="images/gal/4.jpg">
                <img src="images/gal/4_mini.jpg" alt="Миниатюра 4" />
                </a>
    </div>
</div>

CSS

#switchGal p:before {
    content: "Скрыть галерею";
    display: block;
    width: 100%;
}
#switchGal.hide p:before {
    content: "Показать галерею";
    
}

JavaScript

$(document).ready(function () {
    $('#small a').click(function (eventOject) {
        $('#big img').hide().attr('src', $(this).attr('href'));
        $('#big img').load(function () {
            $(this).fadeIn(1000);
        });
        return false;
    }); // конец click 
    $('#switchGal').click(function () {
        $(this).toggleClass('hide');
        $('#gallery').stop().fadeToggle(2000);
    });

}); //конец ready