JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<button id="show1">Show1</button>
<button id="show2">Show2</button>
<button id="show3">Show3</button>

CSS

div {
    
    width: 100px;
    height: 100px;
    
}
#div1 {
    background-color: red;
}
#div2 {
    background-color: yellow;
    visibility: hidden;
}
#div3 {
    background-color: green;
    visibility: hidden;
}

JavaScript

//pretend the divs are images idk ;)

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');

var show1 = document.getElementById('show1');
var show2 = document.getElementById('show2');
var show3 = document.getElementById('show3');

show1.onclick = function(){
    div1.style.visibility = 'visible';
    div2.style.visibility = 'hidden';
    div3.style.visibility = 'hidden';
}

show3.onclick = function(){
    div1.style.visibility = 'hidden';
    div2.style.visibility = 'hidden';
    div3.style.visibility = 'visible';
}

show2.onclick = function(){
    div1.style.visibility = 'hidden';
    div2.style.visibility = 'visible';
    div3.style.visibility = 'hidden';
}