So I'm trying to make my navigation bar toggle using JQuery however when I click on the span button, nothing is happening.

HTML

       <div id="navbar">
        <span class="navbar-btn"></span>
        <ul>
            <li class="currentpage"><a href="/Unit20/Photographer/">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </div>

JQuery

    <script>
        $('span.navbar-btn').click(function() {
            $('#navbar').toggle();
        });
    </script>

Live Version can be found at - Just rescale your browser less than 960 pixels and you should see the button

So I'm trying to make my navigation bar toggle using JQuery however when I click on the span button, nothing is happening.

HTML

       <div id="navbar">
        <span class="navbar-btn"></span>
        <ul>
            <li class="currentpage"><a href="/Unit20/Photographer/">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </div>

JQuery

    <script>
        $('span.navbar-btn').click(function() {
            $('#navbar').toggle();
        });
    </script>

Live Version can be found at http://joshscottonthe/Unit20/Photographer - Just rescale your browser less than 960 pixels and you should see the button

• javascript
• jquery
• html
• css
• responsive-design

• 1 Make sure the script is executed after the DOM is loaded. For example using $(document).ready() – Martin van Driel Commented Nov 11, 2015 at 22:50

2 Answers 2

You need to include your script after the document is loaded.

$(function() {
  $('span.navbar-btn').click(function() {
    $('#navbar').toggle();
  });
})

Or you can include it in the same way you did, just make sure that the <script> tag is placed after that <span class='navbar-button'>.

I think this should solve the problem:

 $(document).ready(function(){
            $('span.navbar-btn').click(function() {
                $('#navbar').toggle();
            });
            });