JSFiddle - React, Tailwind, and code Playground

by nazmoonnoor

HTML

<div class="gallery-wrapper">
     <h3 class="visible-toogle"> >> Hide gallery</h3>

    <div class="galleria">
        <img src="../Images/spherefactor_001.png" data-title="Sphere factor image 1" data-description="Sphere factor" />
        <img src="../Images/spherefactor_002.png" data-title="Sphere factor image 2" data-description="Sphere factor" />
        <img src="../Images/spherefactor_003.png" data-title="Sphere factor image 3" data-description="Sphere factor" />
    </div>
</div>

CSS

.visible-toogle{
    cursor: pointer;
}

JavaScript

$(document).ready(function () {
    $(".visible-toogle").click(function () {
        var result = $(this).text();
        var hText = result.indexOf("Hide") > -1 ? ">> Show gallery" : ">> Hide gallery";
        $(this).text(hText);
        //do slide toggole.
        $('.gallery-wrapper').find(".galleria").slideToggle(500, function () {

        });        
    });
});