Question

So i’m having trouble implementing a JQuery toggle on my navigation menu. I managed to do it quickly on a fresh file but cannot do it on my main version.

What I want: http://jsfiddle.net/wFN9t/6/
What I have: http://jsfiddle.net/KgCYE/9/

I know the div is hidden because If i remove #submenu li{display:none;} from the css, the submenu appears. Could someone tell me what I’m doing wrong?

Javascript

 $(document).ready(function() {
 $('#submenu').click(function() {
 $('#submenu ul').toggle('');
});
});

HTML

<div id="navigation">
    <ul>
    <li><a href="aboutme.html"id="aboutme">Home</a></li>
    <li id="submenu"><a href="project.html" id="projects">Projects</a>
        <ul>
            <li><a href="#">Design Exploration</a></li>
            <li><a href="#">Work in progress</a></li>
            <li><a href="#">Proposal</a></li>
            <li><a href="#">Portfolio</a></li>
        </ul>
    </li>
    <li><a href="reflections.html" id="reflections">Reflections</a></li>
</ul>

CSS

#submenu ul{
display:none;
}

Answer 1

Change

$(document).ready(function() {
  $('#submenu').click(function() {
  $('#submenu ul').toggle('');
});

to

$(document).ready(function() {
   $('#submenu').click(function() {
     $('#submenu ul').toggle('');
   });
});

And you should remove the '' as it doesn’t make the code clearer.

Also, don’t forget to include jQuery when making a fiddle, using the menu in the left panel.

Demonstration