Click and show div, click again and hide

0

I have the following HTML

<nav class="nav nav-default">
  <div class="container">
    <a href="#" class="nav-brand">Brand</a>

    <button type="button" class="nav-button">
      <span class="fa fa-navicon"></span>
    </button>

    <ul class="nav-links" id="nav-links">
      <li><a href="#">Links1</a></li>
      <li><a href="#">Links2</a></li>
      <li><a href="#">Links3</a></li>
      <li><a href="#">Links4</a></li>
      <li><a href="#">Links5</a></li>
    </ul>
  </div>
</nav>

And the following javascript:

$(".nav-button").click(function() {
    $("#nav-links").css("display","block");
});

What happens: I click it it shows the links but when I click again I want it to hide again, I already tried:

Show and hide a div by clicking on the same link

How to hide / show an HTML div?

I just can not get the expected result. I await answers ..

    
asked by anonymous 20.08.2016 / 22:42

1 answer

1

You can use the toggle() function of jQuery:

$(".nav-button").click(function() {
    $("#nav-links").toggle('slow');
});
    
20.08.2016 / 23:11