evento click jQuery para hacer un div deslice hacia abajo y empuje al lado de la ventana gráfica div cabo

Question

Estoy tratando de encontrar la manera de hacer jQuery diapositiva # Content2 hacia abajo y sustituir # Content1 con ella mientras haciendo que parezca # Content1 que realmente está siendo empujado hacia abajo por el # Content2 retirarlo de la vista ...

A continuación, también tendría que hacer el efecto inverso reemplazando # Content2 con # Content1 haciéndolas deslizar hacia arriba y empuje entre sí fuera del camino ...

No soy tan bueno con jQuery, así que estoy seguro de que he ido de este por el camino equivocado, pero esto es lo que he intentado:

$(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

Sólo tiene que hacer clic una vez se unen, y se puede activar o desactivar el efecto de deslizamiento. Usted podría intentar algo como esto

$(document).ready(function() {

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

Answer 2

Ahora usted está tratando de unir dos controladores de eventos Click para el mismo elemento. Esto no es posible la forma en que intenta pero con eventos de espacios de nombres que es: $(#click).bind('click.event1') y luego más tarde .bind('click.event2')

Sin embargo, puede que todo en una función:

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

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

No será en sincronización perfekt pero probablemente busque en Aceptar.