JQuery Toggle Navigation Bar Using Div

Question

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

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

Dmitry Sokurenko · Accepted Answer · 2015-11-11 22:50:16Z

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

answered Nov 11, 2015 at 22:50

Dmitry Sokurenko

6,1324 gold badges34 silver badges54 bronze badges

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

1 Comment

Josh Walshaw Over a year ago

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

EugenSunic · Accepted Answer · 2015-11-11 22:50:27Z

2

I think this should solve the problem:

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

answered Nov 11, 2015 at 22:50

EugenSunic

13.8k15 gold badges68 silver badges96 bronze badges

1 Comment

Josh Walshaw Over a year ago

I added this at the bottom of the page and it works, thanks a lot.

Collectives™ on Stack Overflow

JQuery Toggle Navigation Bar Using Div

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related