I copied w3schools hide and show toggle, but I want it to be reversed, so that the extra information isn't there from the beginning, but the button shows it.

This is the code:

html:

<button onclick="myFunction()">Click Me</button>

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

js:

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

Any help would be much appreciated!

I copied w3schools hide and show toggle, but I want it to be reversed, so that the extra information isn't there from the beginning, but the button shows it.

This is the code:

html:

<button onclick="myFunction()">Click Me</button>

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

js:

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

Any help would be much appreciated!

• javascript
• html
• toggle

• Do you just want to have the #myDIV element have display: none (makes it hidden) initially rather that being shown at the start? Also I don't see any jQuery here, you don't need to add the tag. – Spencer Wieczorek Commented Jun 20, 2017 at 20:34
• I don't see any jQuery in your code, and what you posted seems to work fine. Are you getting any errors in the browser console? – j08691 Commented Jun 20, 2017 at 20:35
• Yes, that sounds right @SpencerWieczorek – easyquestions Commented Jun 20, 2017 at 20:36
• @j08691 JavaScript, not jQuery my fault – easyquestions Commented Jun 20, 2017 at 20:37
• At the top of your JS script, you can just say: document.getElementById('myDIV').style.display = "none"; to set it as showing none from the start. – Jack Parkinson Commented Jun 20, 2017 at 20:37

5 Answers 5

Solution is simple: Just hide the div.

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

Even cooler if you hide it in css instead:

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

And this in your css:

#myDIV {
    display: none;
}

I'd us a utility CSS class for this:

.is--hidden {
    display: none;
} 

Then you can apply it to the element by default:

<button class="mybutton">Click Me</button>
<div class="example is--hidden">Some Text</div>

and toggle it via jQuery:

$('.mybutton').on('click', function () {
    $('.example').toggleClass('is--hidden');
})

Fiddle: https://jsfiddle/tL5mj54n/

You just need to add display : none in your code.

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

<button onclick="myFunction()">Click Me</button>

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

No changes to styles or HTML required. Your javascript should be the following:

(function () {
var x = document.getElementById('myDIV');
if (x.style.display != 'none') {
    x.style.display = 'none';
} else {
    x.style.display = 'block';
   }
} )();

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

The first function runs and hides your div and the second reacts to clicks and toggles the div.

Here's a snippet example

Set the style to hide the element (display:none) from the start. Toggle it on click.

document.getElementById('myButton').onclick = function() {
  var x = document.getElementById('myDIV');
  x.style.display = x.style.display === 'none' ? 'block' : 'none';
};

<button id='myButton' >Click Me</button>

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