Hi all,
I have a hidden division that is supposed to appear when the button, as shown below, is clicked by the user. The division is hidden on page load, and does actually appear when the button is clicked, but nothing happens on the first click. To clarify, you have to click the button twice for the div to appear the first time - and then only once after that to make it disappear and reappear again and again. Why does it need that second click to work the first time? How does someone fix this?
I've done some research but all I seem to be reading is to 'reverse the if statement'. I didn't believe it, but tried it - obviously with no success.
Thanks in advance for any help.
HTML
<button type="button" class="btn green" id="createNew">Create</button>
<div class="newForm hide" id="newForm">
<!-- Hidden division content -->
</div>
Javascript
var button = document.getElementById('createNew');
button.onclick = function() {
var div = document.getElementById('newForm');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};