JSFiddle - React, Tailwind, and code Playground

by carsont

HTML

<div class="padded">
    <button id="on">On</button>
    <button id="off">Off</button>
    <button id="else">Else</button>
</div>
<div id="parent" class="on">
    <div class="child on">On</div>
    <div class="child off">Off</div>
    <div class="child else">Else</div>
</div>

CSS

.padded, #parent {
   padding: 8px;    
}

.child {
    width: 30px;
    height: 30px;
    border: thin solid black;
    padding: 0 2px;
    display: inline-block;
    text-align: center;
    line-height:30px;
}
.on .on,
.off .off,
.else .else {
    display: inline-block;
}
.off .on,
.off .else,
.on .off,
.on .else,
.else .on,
.else .off {
    display: none;
}

JavaScript

$('#on').click(function(e) {
    $('#parent').removeClass().addClass('on');
});

$('#off').click(function(e) {
    $('#parent').removeClass().addClass('off');
});

$('#else').click(function(e) {
    $('#parent').removeClass().addClass('else');
});