How do you toggle the visibility of an html element in Javascript?

Question

I was wondering if anyone could figure out why my function won't work properly. What I am trying to achieve is when a button is clicked it displays text and when it is clicked again it hides it and so on.

function hideshow (){
    var showhide=document.getElementById('text');
    if(showhide.style.display="none")
    {
        showhide.style.display="block";
    }
    else{
        showhide.style.display="none";
    }
}

So far I got it to display my text when I click it once, but once I click it again it has no effect on the text.

`=` is an assignment operator... use `==` if you want to compare. Right now you're hiding it at the start of every click, then showing it again. Always. — TheZ, Jul 10 '12 at 15:44
Or even better, try to use `===` to compare. Learn about it first, though: http://stackoverflow.com/questions/3735939/jslint-expected-and-instead-saw — jfrej, Jul 10 '12 at 15:56

score 2 · Answer 1 · edited May 23 '17 at 12:30

I believe that should be:

function hideshow (){
    var showhide = document.getElementById('text');
    if (showhide.style.display == "none")
    {
        showhide.style.display = "block";
    }
    else{
        showhide.style.display = "none";
    }
}

So, use '==' instead of '=' when comparing. The '=' operator assigns a value. In javascript there is also the '===' operator. The difference is that '==' will cast values, while '===' will compare strictly.

For example:

0 == false; // will return true
0 === false; // will not

So you can also use

if (showhide.style.display === "none")

You can read more about the operators here.

score 1 · Answer 2 · answered Jul 10 '12 at 15:46

you should be using === in your if statment. = is an assignment operator:

function hideshow (){
    var showhide=document.getElementById('text');
    if(showhide.style.display==="none")
    {
        showhide.style.display="block";
    }
    else{
        showhide.style.display="none";
    }
}

Or:

function hideshow (){
    var showhide=document.getElementById('text');

    showhide.style.display = showhide.style.display === "none" ? 
        "block" : 
        "none";  
}

Don't you need a `return false` after changing the display value? — starbeamrainbowlabs, Jul 10 '12 at 15:48

score 1 · Answer 3 · answered Jul 10 '12 at 16:01

You should be using the comparison == operator instead of assigning the value using the = operator.

Try:

function hideshow() {
    var showhide = document.getElementById('text').style;
    (showhide.display = showhide.display == "none" ?  "block" : "none" )
}

You can assign and compare in one statement using:

(showhide.display = showhide.display == "none" ?  "block" : "none" )
                  ^assign            ^comparison

Demo: http://jsfiddle.net/7Eaf2/

Tom · Accepted Answer · 2012-07-12T18:21:24.310

0

function hideShow() {
    el.style.display != "none" ? "none" : "block";
}

edited Jul 12 '12 at 18:21

answered Jul 10 '12 at 15:47

Tom

4,096
2
24
38

Why does my text not display on my first click? I have my text set to onClick="hideshow();" but, it only runs on my second click. CSS for my text has display:none if that helps. – user1512677 Jul 12 '12 at 15:43
I still need to double click in order to get it to run. Don't worry about it, i'll search online for it. – user1512677 Jul 12 '12 at 16:00

score 0 · Answer 5 · answered Jul 10 '12 at 15:55

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function hideshow() {
            var showhide=document.getElementById('text');
            if(showhide.style.visibility=="hidden")
            {
                showhide.style.visibility="visible";
            }
            else{
                showhide.style.visibility="hidden";
            }
        }
    </script>
</head>
<body>
    <div id="text">Text</div>
    <button onclick="hideshow()">hideshow</button>
</body>
</html>

How do you toggle the visibility of an html element in Javascript?

5 Answers5