JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<div class="blue">
    <button id="toggle1">Click Me</button>
</div>

<div class="green">
    <button id="toggle2">Click Me</button>
</div>

<div class="red">
    <button id="toggle3">Click Me</button>
</div>

CSS

div {
width: 100px;
height: 100px;
border: solid 1px black;
float: left;
margin-right: 10px;    
}

.red {
 background-color: red;   
}

.blue{
 background-color: blue;   
}

.green{
 background-color: green;   
}

JavaScript

$('button[id^="toggle"]').toggle(function () {
    var parent = $(this).parent();
    parent.siblings("div").fadeOut();
},function () {
    var parent = $(this).parent();
    parent.siblings("div").fadeIn();
    
});