1

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.net/Unit20/Photographer - Just rescale your browser less than 960 pixels and you should see the button

1

2 Answers 2

6

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'>.

1
  • Ahh, I had the script at the top of the page just below the opening body tag, that was what caused the issue then as it works now that I placed it just above the closing body tag. Thanks a lot for the help Nov 11, 2015 at 23:05
2

I think this should solve the problem:

 $(document).ready(function(){
            $('span.navbar-btn').click(function() {
                $('#navbar').toggle();
            });
            });
1
  • 1
    I added this at the bottom of the page and it works, thanks a lot. Nov 11, 2015 at 23:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.