Button click works on second click only

Question

I have a button and a div under it, the button must show this div onclick, i wrote the function and everything is fine, but it works only on second click and i can\'t figure

Answer 1

To get the value that you apply via a stylesheet (or block) you need to use getComputedStyle(). document.getElementById('myDiv').style.display can only read inline styles.

function showDiv() {
    var x = document.getElementById('myDiv');
    if ( window.getComputedStyle(x, null).getPropertyValue("display") === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

#myDiv{
display: none;
}

Show div


test
test
test
test 
test
test