JSFiddle - React, Tailwind, and code Playground

by Boyke Ferdinandes

HTML

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    width: 500px;
    height: 500px;
    background-color: lightblue;
    visibility: hidden;
}
</style>
<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    var period_value = document.getElementById('period').value;   
    
    if(period_value == 5){
      x.style.visibility = 'visible';      
    }
    else {
    	x.style.visibility = 'hidden';
    }
}

</script>

</head>
<body>
<select id="period" onchange="myFunction()" style="width: 153px;">
            <option value="1" selected="selected">Current Month</option>
            <option value="2">Last 28 Days</option>
            <option value="3">Last Month</option>
            <option value="4">Last Quarter</option>
            <option value="5">Custom Dates</option>
          </select>

<div id="myDIV">
This is my DIV element.
</div>


</body>
</html>