jQuery cliquez sur l'événement pour faire une diapositive div vers le bas et pousser à côté div de fenêtre

Question

Je suis en train de comprendre comment faire jQuery diapositive content2 vers le bas et remplacer # content1 avec elle tout en faisant ressembler # content1 est effectivement poussé vers le bas par # content2 le retirer de la vue ...

Ensuite, le même bouton qui a été cliqué pour faire # Content2 remplacer # content1 devrait également faire l'effet inverse en remplaçant # content2 avec # content1 en les faisant glisser vers le haut et pousser les uns les autres de la manière ...

Je ne suis pas tout ce grand avec jQuery donc je suis sûr que je suis allé à ce sujet dans le mauvais sens, mais voici ce que j'ai essayé:

$(document).ready(function() {
$('#click').click(function() {
 if($('#content1').is(':visible')) {
  $('#content1').slideUp();
 }
 else {
  $('#content2').slideDown();
 }
}).click(function() {
 if($('#content1').is(':visible')) {
  $('#content2').slideDown();
 }
 else {
  $('#content1').slideUp();
 }
});

});

Answer 1

Il vous suffit de lier cliquez une fois, et vous pouvez activer ou désactiver l'effet de la diapositive. Vous pouvez essayer quelque chose comme ça

$(document).ready(function() {

  $('#click').click(function() {
    $('#content1').slideToggle();
    $('#content2').slideToggle();
  }
}

Answer 2

Maintenant, vous essayez de lier deux gestionnaires d'événements de clic sur le même élément. Ce n'est pas possible la façon dont vous essayez mais avec des événements namespaced il est: $(#click).bind('click.event1') puis plus tard .bind('click.event2')

Cependant, vous pouvez à tous dans une fonction:

$(document).ready(function() {
    // Pre selected for increased speed
    var content1 = $('#content1');
    var content2 = $('#content2');

    $('#click').click(function() {
        content1.slideToggle();
        content2.slideToggle();
    });
});

Il ne sera pas en synchronisation Perfekt mais sera probablement OK.