JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click the Try it button to toggle between hiding and showing the DIV element:</p>
<button onclick=myClick()>Try it</button>
<button onclick=myClick2()>Try it2</button>
<div id=myDIV>
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to none.</p>
</body>
</html>
CSS
#myDIV {
width: 500px;
height: 500px;
background-color: lightblue;
}
JavaScript
function myClick() {
var x = document.getElementById('myDIV');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function myClick2(){
alert('Add it');
}