JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<button class="project-wrapper">Click me 1</button>
<button class="project-wrapper">Click me 2</button>
<button class="project-wrapper">Click me 3</button>
<button class="project-wrapper">Click me 4</button>

<div id="slider0" class="hidden">
    test 0
</div>
<div id="slider1" class="hidden">
    test 1
</div>
<div id="slider2" class="hidden">
    test 2
</div>
<div id="slider3" class="hidden">
    test 3
</div>

CSS

button {
    width: 40px;
    height: 40px;
    margin: 5px;
    background-color: red;
}
div {
    width: 200px;
    height: 200px;
    background-color: purple;
}

JavaScript

$('.hidden').hide();
$(".project-wrapper").on('click', function(){
                    $('.hidden').hide();
                    var btnOrder = $(this).index();
                    alert(btnOrder);
                    var sliderClass = $("#slider"+btnOrder);

                     if (sliderClass.hasClass('hidden')) {

                            sliderClass.show();
                     }
 });