How to revert animation with jQuery?

Question

I'm wondering how to revert this animation using jQuery, look this page:

http://bksn.mx/TAC/

The correct way is when you click "Equipo", it shows smooth animation and click this again, it reverts animation very well.

The incorrect way is when you click "Arquitectura", it starts smooth animation, and click this again... it looks like messed up and doesn't revert animation...

I tried to make .toggle(); methods but it didn't work 3 times, i had no idea why...

There is a script of Arquitectura:

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: 20
    }, {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

Another script of "Equipo" if you want:

$('h2#equipo').click(function() {
  $('section#team').animate({
    opacity: 'toggle',
    height: 'toggle'
    }, {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

Thanks in advance!

Answer 1

Your margin property isn't toggling (in animates in both times, giving the jerky effect):

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: 20},
{
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

The dirty way to fix it is to include an inline if:

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: ($(this).css('margin') == 20) : 0 ? 20},
{
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

Not sure if another more elegant solution exists.