Replacing JS animate by jquery ui fold effect

Question

I'm currently using the code below, which works great. However I'm experiencing a few issues/limtations that make me think that it would be more appropriate to use jQuery UI fold effect instead of js animate function.

As I'm not very familiar with JS could you please help me to adapt the code below to use jQuery UI fold effect rather than animate function? Many thanks

http://jsfiddle.net/rnjea41y/

JS:

$("a").click(function () {
  var page = $(this).data("page");
  if ($('div:animated').id != page) {
    var active = $(".fold.active");

    // if there is visible fold element on page (user already clicked at least once on link)
    if (active.length) {
      active.animate({
        width: "0"
      }, 200)
      .animate({
        height: "0"
      }, 200, function () {
        // this happens after above animations are complete
        $(this).removeClass("active");
      });
      // clicking for the first time
    };
    if (active.attr("id") != page) {
      $("#" + page)
      .addClass("active")
      .animate({
        height: "500px"
      }, 1000, 'linear')
      .animate({
        width: "500px"
      }, 400, 'linear')
    }
  }
});

Answer 1

Your code is pretty close to what you need. I think the main issue is your styles and understanding how they interact with the effect.

The fold effect will show or hide elements based on their current state. You have the .fold class that starts your divs at 0x0 pixels and hidden, but what you really want is a rule that describes what your divs look like when displayed to your users.

Original:

.fold {
    display: none;
    width: 0;
    height: 0;
    position: absolute;
}

Corrected:

.fold {
    width: 500px;
    height: 500px;
    position: absolute;
}

Since your .fold style is now describing the end state of your divs, it no longer has a display: none; rule. Since you want the divs to initially be hidden, you should add some Javascript to hide those initially:

$(".fold").hide();

Now, instead of manually animating styles, you can use the fold effect:

Original:

// if there is visible fold element on page (user already clicked at least once on link)
if (active.length) {
    active.animate({
        width: "0"
    }, 200)
        .animate({
        height: "0"
    }, 200, function () {
        // this happens after above animations are complete
        $(this).removeClass("active");
    })

    // clicking for the first time
}
if (active.attr("id") != page) {
    $("#" + page)
        .addClass("active")
        .animate({
        height: "500px"
    }, 1000, 'linear')
        .animate({
        width: "500px"
    }, 400, 'linear')

}

Updated:

if (active.length) {
    active.toggle("fold", function () {
      $(this).removeClass("active");
    });
}
// clicking for the first time
if (active.attr("id") != page) {
    $("#" + page)
      .addClass("active")
      .toggle("fold");
}

Now that all of that is working, I think you'll want to play with some of the settings. The documentation for the fold effect shows that you can set the size of your element as it is folded up as well as the order of folding. To mimic the link that you posted, I would set the size to 5 since your divs have a 5px border. I would also set horizFirst to true since that is what your example shows.

I also decided to use toggleClass instead of addClass("active") and removeClass("active"). This resulted in simpler settings.

Here's the finished product:

$(".fold").hide();

var foldSettings = {
    easing: 'linear',
    duration: 1200,
    size: 5,
    horizFirst: true,
    complete: function () {
        $(this).toggleClass("active");
    }
}

$("a").click(function () {
    var page = $(this).data("page");
    if ($('div:animated').id != page) {
        var active = $(".fold.active");

        // if there is visible fold element on page (user already clicked at least once on link)
        if (active.length) {
            active.toggle("fold", foldSettings);
        }
        // clicking for the first time
        if (active.attr("id") != page) {
            $("#" + page).toggle("fold", foldSettings);
        }
    }
});

http://jsfiddle.net/z69zofxm/3/