CODEWITHSUNDEEP
javascript
user1512677
user1512677

Reputation: 33

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

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.

Upvotes: 1

Views: 3947

Answers (5)

Tom
Tom

Reputation: 4180

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

Upvotes: 0

Peter
Peter

Reputation: 14128

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.

Upvotes: 2

Robert
Robert

Reputation: 8767

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/

Upvotes: 1

Michael Besteck
Michael Besteck

Reputation: 2423

<!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>

Upvotes: 0

CD..
CD..

Reputation: 74176

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";  
}

Upvotes: 1

Related Questions