Click and show div, click again and hide

Asked

Viewed 378 times

0

Guys 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 shows the links but when I click again I want you to hide again, already tested:

Show and hide a div by clicking the same link

How to hide/show a div in HTML?

I just can’t get the result I expect. I’m waiting for answers..

javascript html css

1 answer

1


You can use the function toggle()jQuery:

$(".nav-button").click(function() {
    $("#nav-links").toggle('slow');
});

  • Thanks, it worked out, not to be lazy, but how do you change this slow to one that is faster? not too fast but not too much to wander ?

  • 1

    You can pass it without 'slow' or you can pass it with 'fast' as in this example: $("#nav-links").toggle('fast');.

  • 1

    vlw worked. thank you

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.