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

user_4821853 0
Viewed 48

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);
      });
    }
  }
jquery
2 Answers

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

user_79671190

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);
});
user_89871280
Related