Javascript change display CSS

Question

Im completely new to Javascript, this is what i want: Guy clicks on an element, so i trigger an onclick and i want to run a JS function, all clear so i need a JS function, what this function needs to do:

• Check if the display of element #mobilemenu is block or none.
• When it is block change it to none, when its none change it to block.

What i found so far was this:

function Change(){
document.getElementById("mobilemenu").style.display = "block"; }

But i am stuck on checking if it is currently block or none. I am kinda new to JS so maybe it is super easy (as i think) but i can't find a proper tutorial or some examples.

Thanks in advance!

Answer 1

Just add an if-else .

function Change(){
    var displayVal = document.getElementById("mobilemenu").style.display;

    if (displayVal == "block")
        document.getElementById("mobilemenu").style.display = "none";
    else if (displayVal == "none")
        document.getElementById("mobilemenu").style.display = "block";
}

Here is a Fiddle: http://jsfiddle.net/vaa9goLe/

Answer 2

You can use an if / else statement to check whether the element is displayed, and then show or hide it accordingly:

function Change() {
    /* Put the mobilemenu into a variable */
    var mobilemenu = document.getElementById("mobilemenu");

    /* Check the display property of the element's style object */
    if (mobilemenu.style.display !== "block") {
        /* The element isn't display: block; so show it */
        mobilemenu.style.display = "block"; 
    } else {
        /* The element is display: block; so hide it */
        mobilemenu.style.display = "none";
    }
}

Answer 3

Also, you can use getComputedStyle in case your element doesn't have initial display value to ensure your function will always work.

var element = document.getElementById('btn');

element.onclick = function() { 
    var mydiv = document.getElementById('mydiv'),
        isVisible = (mydiv.currentStyle || window.getComputedStyle(mydiv, '')).display == 'block'; 
    if (isVisible){
        mydiv.style.display = 'none';
    } else {
        mydiv.style.display = 'block';
    }
};

jsfiddle:

http://jsfiddle.net/ykypcmt2/

Answer 4

This may help you

<div id="mobilemenu" style="display:block"></div>
<script type="text/javascript">
function Change(){
var contentId = document.getElementById("mobilemenu");
contentId.style.display == "block" ? contentId.style.display = "none" : 
contentId.style.display = "block";
}
</script>

Answer 5

If the div had style value anything other than block or none , the following code should do nothing and preserve the original style value.

function Change(){

        document.getElementById("mobilemenu").style.display = ( document.getElementById("mobilemenu").style.display === "block" ) ? "none" :  ( document.getElementById("mobilemenu").style.display === "none" ) ? "block" : document.getElementById("mobilemenu").style.display ;
}