How do I get navbar toggle button to dropdown on first click, rather than dropping, disappearing, and then having to click again?

Question

When my site is on small screens and shows a navbar collapsed toggle button, I wrote some jquery to hide the navbar upon a click of menu item, then upon clicking the navbar toggle button again I wanted it to simply show itself again so the user could choose another menu item. What happens is that after the first hide() event, it takes 2 clicks of the navbar toggle button to display the menu. How can I get it so that there is only 1 click needed? Here is code and link to site:

 $('.select').on('click', function() {
      $('#navigation').hide();
    });

    $('.navbar-toggle').on('click', function() {
      $('#navigation').show();
    });

http://mattparmanswebsites.herokuapp.com/ (shrink screen below width of 700 to see collapsed menu issue)

Possible duplicate of [Hide Twitter Bootstrap nav collapse on click](http://stackoverflow.com/questions/16680543/hide-twitter-bootstrap-nav-collapse-on-click) — Brian Ray, Mar 11 '16 at 16:04

score 0 · Answer 1 · answered Mar 11 '16 at 14:05

0

Try using the .toggle function to show/hide the #navigation.

$('.select').on('click', function() {
    $('#navigation').toggle();
});

Here's an example.

answered Mar 11 '16 at 14:05

Brian Ray

1,482
3
20
20

Thanks, I did try toggle. It actually made the problem worse. Instead of simply toggling, it now requires 2-3 clicks to toggle after the first hide() is triggered.... – MattP Mar 11 '16 at 14:32
You don't need the hide on click event. Replace all of the code you posted above with what I provided. If it doesn't work, the problem is somewhere else. – Brian Ray Mar 11 '16 at 14:50
With your code, once the first click to #navigation occurs, the toggle is triggered, but then the user cannot toggle again after that. Something must be breaking or not selecting properly. That's where I got stuck. – MattP Mar 11 '16 at 14:56
I see what you're doing now. You're using the Bootstrap navbar and are closing it in a non-Bootstrap way. Check out the accepted answer on this [question](http://stackoverflow.com/questions/16680543/hide-twitter-bootstrap-nav-collapse-on-click). – Brian Ray Mar 11 '16 at 16:01

score 0 · Answer 2 · edited Mar 12 '16 at 00:08

0

Simply toggle the event:

$(".select").click(function(){
    $("#navigation").toggle();
});

edited Mar 12 '16 at 00:08

Uyghur Lives Matter

18,820
42
108
144

answered Mar 11 '16 at 14:10

KyleM

618
5
17

How do I get navbar toggle button to dropdown on first click, rather than dropping, disappearing, and then having to click again?

2 Answers2