单击javascript / html后如何切换div

Question

I'm trying to use a div to show game rules, so when they select the "button" it will reveal the rules, but I can't get it to close by reselecting it. I have tried a few other solutions but they are not quite what I am looking for.

<script type="text/javascript">
function showDiv() {
   document.getElementById('howto').style.display = "block";
}
</script>

<input type="button" name="rules" value="How to Play!" onclick="showDiv()" />
<div id="howto"  style="display:none;" class="rules" > WELCOME</div>

Answer 1

You could have a toggleDiv rather than showDiv function that checks the display style and sets it to whichever of block or none it is not currently set to. For example:

<script type="text/javascript">
function toggleDiv() {
 var div = document.getElementById('howto'); 
 div.style.display = (div.style.display == "block") ? "none" : "block";
}
</script>

<input type="button" name="rules" value="How to Play!" onclick="toggleDiv()" />
<div id="howto"  style="display:none;" class="rules" > WELCOME</div>