<button onclick=”myFunction()”>Click Me</button>
<div style=”display:none;” id=”myDIV”>
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById(“myDIV”);
if (x.style.display === “none”) {
x.style.display = “block”;
} else {
x.style.display = “none”;
}
}
</script>
Sometimes you can’t use the above due to javascript scope issues, or something similar, in which case you can make it work by having things inline:
<!– Clickable Element –>
<span id=”toggle-btn” onclick=”document.getElementById(‘popup’).classList.toggle(‘show’)”>What is MAP?</span><br>
<style>
/* Initially hidden */
#popup {
display: none;
padding: 10px;
background: #f9f9f9;
border: 1px solid #ddd;
width: 80%;
margin-top: 10px;
}
.show {
display: block !important;
}
</style>
<!– Hidden DIV –>
<div id=”popup”>Manufacturers set a Minimum Advertised Price (MAP), which is the lowest price we are allowed to display online. However, our in-store or direct quote pricing may be lower! <a href=”mailto:websales@adamstarpntool.com”><strong>Contact us to get Adam’s Guaranteed Best Price</strong></a>!
</div>
