JSFiddle - React, Tailwind, and code Playground

by David Buzatto

HTML

<div id="div1">put what you want here</div>
<div id="div2">here too!</div>
<div id="div3">and here too, of course!</div>
<button id="btnHideDiv1" type="button">Hide Div 1</button>
<button id="btnShowDiv1" type="button">Show Div 1</button>
<br/>
<button id="btnHideDiv2" type="button">Hide Div 2</button>
<button id="btnShowDiv2" type="button">Show Div 2</button>
<br/>
<button id="btnHideDiv3" type="button">Hide Div 3</button>
<button id="btnShowDiv3" type="button">Show Div 3</button>

JavaScript

// hide and show

$( "#btnHideDiv1" ).click(function(){
    $( "#div1" ).hide();
});

$( "#btnShowDiv1" ).click(function(){
    $( "#div1" ).show();
});

$( "#btnHideDiv2" ).click(function(){
    $( "#div2" ).fadeOut();
});

$( "#btnShowDiv2" ).click(function(){
    $( "#div2" ).fadeIn();
});

$( "#btnHideDiv3" ).click(function(){
    $( "#div3" ).slideUp();
});


$( "#btnShowDiv3" ).click(function(){
    $( "#div3" ).slideDown();
});