How to use touchSwipe event to a sliding div in JQM website

Question

I have a simple slider that works on click event . Then I am trying to add the same effect on sipe left right . But I am having trouble to do it

Here is the fiddle that I created .

I am using swipeTouch plugin for the gestures .

If some one can update the fiddle to do the same effect using swipe gestures would be really helpful .

Script

$(".fieldset").swipe({
    swipe: function (event, direction, distance, duration, fingerCount) {
        // $(this).text("You swiped " + direction );

        if (direction == 'right') {
            console.log("You swiped " + direction);
        }
    }
});

$('ul li.fieldset').each(function () {
    var h = $(this).height();
    var next_height = $(this).next('.hidenset').height();
    var diff = h - next_height;
    console.log('The height of li:' + h);
    $(this).next('.hidenset').css('height', h + 'px');
    $(this).next('.hidenset').css('margin-top', -h + 'px');

});

$(".fieldset a").click(function () {
    parent = $(this).parent('.fieldset');
    $('.fieldset').not(parent).removeClass('left-slide').addClass('right-slide');

    if ($(parent).hasClass('left-slide')) {
        $(parent).removeClass('left-slide').addClass('right-slide');
    } else {
        $(parent).removeClass('right-slide').addClass('left-slide');
    }

    form = $(parent).attr('id');
    var arr = form.split('_');
    var menu = '#menu_' + arr[1];

    $('.hidenset').not(menu).removeClass('menu-open').addClass('menu-close');

    if ($(menu).hasClass('menu-open')) {
        $(menu).removeClass('menu-open').addClass('menu-close');
    } else {
        $(menu).removeClass('menu-close').addClass('menu-open');
    }

});

Thanks & regards

Answer 1

Here you go:

Updated FIDDLE

$(".fieldset").swipe({
  swipe:function(event, direction, distance, duration, fingerCount) {
   // $(this).text("You swiped " + direction );
   alert("You swiped " + direction );
   if(direction == 'right') {
       //only slide if menu is open
       if($(this).hasClass('left-slide')) {
           $(this).find("#sub2").click();
       }
   } else if (direction == 'left') {
       //only slide if menu is closed
       if($(this).hasClass('right-slide')) {
           $(this).find("#sub2").click();
       }
   }
  }
});

You check the direction of the swipe and see if the menu is already in the appropriate state. If not, find the button in the fieldset and trigger the click event.