toggle JavaScript not working

Question

I just want a simple toggle js, so when you click on About in the nav the about text appears, but it's now working oO

JS part:

<script language="JavaScript" type="text/javascript">
function toggle() {
var about = document.getElementById('about')
if(about.style.display = "none")
{
about.style.display = "block";
}

else
{
about.style.display = "none";
}
}
</script>

HTML:

<header>
...
    <nav><ul>
        <li><a href="index.html" id="active">Home</a></li>
        <li><a href="javascript:toggle()" onClick="toggle()">About me</a></li>
        ...more <li>s...
    </ul></nav>
</header>
<br/>

<div id="about">
aboutme
</div>

CSS:

#about {
    display: none;
    }

What am I doing wrong?? Can anybody help me?

Also, don't put javascript:toggle() in the href of the link. — Felix Kling
– Felix Kling, Commented Jan 13, 2013 at 15:58
Yes, that's ok. But if you only use that element for JavaScript, you should rather use a button and style it as a link if you want to. — Felix Kling
– Felix Kling, Commented Jan 13, 2013 at 18:56

nanobash · Accepted Answer · 2013-06-04 20:17:52Z

5

In if statement you have to have two equal sign

function toggle() {
    var about = document.getElementById('about');
    if(about.style.display == "none")
    {
        about.style.display = "block";
    }
    else
    {
        about.style.display = "none";
    }
}

Note

= you can just assign value to variable
== must be used to compare variables values
=== must be used to compare variables in every aspect (In type too)

edited Jun 4, 2013 at 20:17

answered Jan 13, 2013 at 15:21

nanobash

5,4967 gold badges41 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2013-01-13 15:25:10Z

2

Fix the == problem, and then instead of hiding your "about" element with that CSS rule put the style directly on the element:

<div id=about style='display: none'>About Me</div>

If you don't do that, the JavaScript code won't see that "display" property on the style object. (The style object only reflects styles directly associated with the element, not those controlled by CSS stylesheets.)

answered Jan 13, 2013 at 15:25

Pointy

415k62 gold badges600 silver badges631 bronze badges

Collectives™ on Stack Overflow

toggle JavaScript not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related