CODEWITHSUNDEEP
jquery
DieselHashtag
DieselHashtag

Reputation: 45

How can I make my menu call a different action on second click?

I want my menu to push the content to the right when clicked.

I've written the following to add .open class to the site .wrapper The .open class has a 'right: -320px' css rule so pulls the content to the right.

On second click of the menu icon I want the .open class removed so the content resolves back to left:0

var first_click = true;
links.onclick = function () {
    if (first_click) {
      $(".sidebar-menu_btn").click(function () {
        setTimeout(function () {
          $(".wrapper").addClass("open");
        }, 250);
      });
      first_click = false;
    } else {
      $(".sidebar-menu_btn").click(function () {
        setTimeout(function () {
          $(".wrapper").removeClass("open");
        }, 05);
      });
    }
  }

Upvotes: 2

Views: 60

Answers (2)

turivishal
turivishal

Reputation: 36104

Here @Anku's answer is good, but for the setTimeout duration, i have added condition using hasClass:

$(".sidebar-menu_btn").on('click', function(){
    let hasClass = $(".wrapper").hasClass("open");
    setTimeout(function(){
        $(".wrapper").toggleClass("open");
    }, hasClass ? 5 : 250);
});

Upvotes: 1

Anku Singh
Anku Singh

Reputation: 954

Instead of using addClass and removeClass you can use one single jquery code it will work for both add and remove

just write on whichever click event you want to add

 $(".sidebar-menu_btn").click(function(){
   setTimeout(function(){
     $(".wrapper").toggleClass("open");
    }, 250);
});

so when you click on sidebar-menu_btn first time it will add class open and on second time it will remove class open

Upvotes: 2

Related Questions