CODEWITHSUNDEEP
jquerycss
Goatsy
Goatsy

Reputation: 125

Apply both open and close state to same button?

I'm a jQuery beginner.

Trying to apply a close state to same hamburger button w/ an open state already applied.

I'm able to click the hamburger button and reveal the slide-out navigation, but when duplicating the button and applying the close state, it doesn't seem to wanna work.

I'm following this article: http://css-tricks.com/off-canvas-menu-with-css-target/

Here is my codepen: http://codepen.io/Goatsy/pen/mBqku

  <a href="#main-nav" class="open-menu">
<button>
    <span class="line line-t"></span>
    <span class="line line-m"></span>
    <span class="line line-b"></span>
</button>
  </a>  


  <a href="#" class="close-menu">
<button>
    <span class="line line-t"></span>
    <span class="line line-m"></span>
    <span class="line line-b"></span>
</button>
  </a>

Update: I added what I'm hoping is the right toggle function. Now the nav is disappearing. I want the nav to close when clicking the X. And the nav to open when clicking the hamburger.

$("button").on("click",function(){
  $(this).toggleClass("menu-on");
});


$( "button" ).click(function() {
  $( "nav" ).toggle( );
});

Upvotes: 0

Views: 2425

Answers (1)

Asher
Asher

Reputation: 577

You need to use .toggle function, and here is a tutorial about how to use it.

For example, if you want to toggle show and hide for div with id bar:

$("button").click(function() {
  $('#bar').toggle(function() {
    $(this).show(1000);
  }, function() {
    $(this).hide(1000);
  });
});

Upvotes: 1

Related Questions