Switch/div palanca (jQuery)

Question

deseo de realizar una tarea bastante simple (espero!)

Tengo dos etiquetas div y 1 etiquetas de anclaje, así:

<a href="javascript:void(0);">forgot password?</a> 
<div id="login-form"></div> 
<div id="recover-password" style="display:none;"></div> 

lo que deseo para lograr es utilizar la etiqueta de anclaje para alternar entre las dos etiquetas div, ocultar el uno y mostrar el otro y viceversa.

¿Cómo se puede hacer esto de la mejor manera?

Saludos cordiales.

Answer 1

Dado que uno div está escondido en un principio, sólo tiene que llamar toggle tanto para los divs:

<a href="javascript:void(0);" id="forgot-password">forgot password?</a> 
<div id="login-form">login form</div> 

<div id="recover-password" style="display:none;">recover password</div> 

<script type="text/javascript"> 
$(function(){ 
    $('#forgot-password').click(function(){ 
    $('#login-form').toggle(); 
    $('#recover-password').toggle(); 
    }); 
}); 
</script> 

Answer 2

Puede escribir un plugin jQuery simple para hacer esto. El complemento se vería así:

(function($) { 
$.fn.expandcollapse = function() { 
    return this.each(function() { 
     obj = $(this); 
     switch (obj.css("display")) { 
      case "block": 
       displayValue = "none"; 
       break; 

      case "none":      
      default: 
       displayValue = "block"; 
     } 

     obj.css("display", displayValue); 
    }); 
}; 

} (jQuery));

Después conecte el plugin para el evento click de la etiqueta de anclaje:

$(document).ready(function() { 
    $("#mylink").click(function() { 
     $("div").expandcollapse(); 
    }); 
}); 

Siempre que se establece el 'display' inicial atributos para cada div a ser 'bloque' y 'ninguno', respectivamente, que debería cambiar para mostrarse/ocultarse cuando se hace clic en el enlace.

Answer 3

Creo que quieres esto:

$('#recover-password').show(); 

o

$('#recover-password').toggle(); 

Este es hecho posible por JQuery

Espero que esto ayude ...

Answer 4

¿Qué tal esto

<script type="text/javascript" language="javascript"> 
    $("#toggle").click(function() { $("#login-form, #recover-password").toggle(); }); 
</script> 

Por su HTML que parece:

<a id="toggle" href="javascript:void(0);">forgot password?</a> 
<div id="login-form"></div> 
<div id="recover-password" style="display:none;"></div> 

Hey, está bien! ¡Una línea! I < 3 jQuery.

Answer 5

Creo que esto funciona

$(document).ready(function(){ 

    //Hide (Collapse) the toggle containers on load 
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) 
    $("h2.trigger").click(function(){ 
     $(this).toggleClass("active").next().slideToggle("slow"); 
     return false; //Prevent the browser jump to the link anchor 
    }); 

}); 

Answer 6

probar este http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/

Answer 7

utilicé esta manera de hacer eso por varios bloques sin conjurando nueva javascript:

<a href="#" data-toggle="thatblock">Show/Hide Content</a> 

<div id="thatblock" style="display: none"> 
    Here is some description that will appear when we click on the button 
</div> 

A continuación, una parte js para todos tales casos:

$(function() { 
    $('*[data-toggle]').click(function() { 
    $('#'+$(this).attr('data-toggle')).toggle(); 
    return false; 
    }); 
}); 

Descrito here

Answer 8

Éste es cómo alternar dos div al mismo tiempo:

$('#login-form, #recover-password').toggle(); 

funciona!

Answer 9

function toggling_fields_contact_bank(class_name) { 
      jQuery("." + class_name).animate({ 
       height: 'toggle' 
      }); 
     }