How to simulate click event on a button on another event

Question

So I implemented a jQuery Swipe plugin TouchSwipe, which let's me execute jQuery events based upon a certain swipe. So I've got this piece of code..

    $(function() {   /* Swipe gestures */    
      //Enable swiping...
      $(document).swipe( {
        //Generic swipe handler for all directions
        swipeRight:function(event, direction, distance, duration, fingerCount) {
              $('.off-canvas-wrap').toggleClass('move-right');
              >>>JQUERY EVENT SHOULD BE PLACED HERE<<< 
        },
        swipeLeft:function(event, direction, distance, duration, fingerCount) {
              $(".off-canvas-wrap").removeClass("move-right"); 
        },

        //Default is 75px, set to 0 for demo so any distance triggers swipe
         threshold:0
      });
    }); /* End of swipe gestures script */

And at the point of '>>>Jquery event should be placed here <<<' well.. There should be a query event. :)

So here comes my difficulty. I've found an awesome Off Canvas Menu plugin (If it's called a plugin at least..) Check Github out here -> SidebarTransitions And demo -> Demo here. However, that is based upon the click of a button. I want to execute the event that happens when you click a single button ('Reveal', ST-effect-2, to be precise, seen in the demo) as an executable JS event, plugged in the Swipe line of code.

So, at the part of '>>>Jquery event should be placed here <<<' there should be one or a few lines, that represent the code behind the button to open the sidebar, so instead of clicking a button, the user can open the sidebar with a swipe. So no .click() or .on().

For a view in the Javascript of the SidebarTransitions, instead of looking through all the scripts, this one is the only one necessary to perfectly execute the open/close of the sidebar. > here

Oh, and btw, the line for closing (which I can place behind the code for the different direction of swipe) would be great too!

Thanks very much guys. Hopefully you guys can figure it out, since over the past few hours, I wasn't been able to.

JSFiddle ->> here! Note: For those of you with a multi-touch trackpad or any swipe options, swipe with one or multiple fingers (I need three to swipe) on the result box and you should get a alert with 'yup' to verify you're able to swipe. Oh.. And ignore the huge list of CSS

Answer 1

Try this way to do this :

$(function() {   /* Swipe gestures */    
  //Enable swiping...
  $(document).swipe( {
    //Generic swipe handler for all directions
    swipeRight:function(event, direction, distance, duration, fingerCount) {
          $('.off-canvas-wrap').toggleClass('move-right');
          $('[data-effect="st-effect-2"]').trigger('click');
    },
    swipeLeft:function(event, direction, distance, duration, fingerCount) {
          $(".off-canvas-wrap").removeClass("move-right"); 
    },

    //Default is 75px, set to 0 for demo so any distance triggers swipe
     threshold:0
  });
}); /* End of swipe gestures script */