Toggle button starting on off, instead of on

Question

I am adapting this code from w3 schools but the code has the content exposed when the page in refreshed, and collapses when clicked. I wish for the content to start hidden, and only uncover when the button is hit.

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}
</style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV     element:</p>

<button onclick="myFunction()">Try it</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>

<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

</body>
</html>

Possible duplicate of [toggle reveal div with javascript. Start hidden, click to reveal](https://stackoverflow.com/questions/41765069/toggle-reveal-div-with-javascript-start-hidden-click-to-reveal) — Pedro S Cord, Aug 31 '17 at 18:54

score 3 · Answer 1 · answered Aug 31 '17 at 18:33

3

<div id="myDIV" style="display:none;">
   This is my DIV element.
</div>

answered Aug 31 '17 at 18:33

mchan

144
5

I suggest instead to have the "display:none" in the CSS part that is already defined in the code snippet. Better having the default behavior done on the CSS and changes being added by classes or some cases directly on the elements (even tho i think thats bad practice) – Fyllekanin Aug 31 '17 at 18:36
valid point. changing css class: https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript – mchan Aug 31 '17 at 18:47

Toggle button starting on off, instead of on

1 Answers1