ejemplos - Switch/toggle div(jquery)

toggle jquery ejemplos

Question

Deseo realizar una tarea bastante simple (¡espero!)

Tengo dos etiquetas div y 1 etiquetas de anclaje, como esta:

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

Lo que deseo lograr es usar la etiqueta de anclaje para alternar entre las dos etiquetas div, ocultar la una y mostrar la otra y viceversa.

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

Atentamente.

Answer 1

Así es como alterno dos div al mismo tiempo:

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

funciona !

Answer 2

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 3

Creo que quieres esto:

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

o

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

Esto es posible por JQuery.

Espero que esto ayude...

Answer 4

Dado que un div está inicialmente oculto, simplemente puede llamar a toggle para ambos 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 5

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

(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));

Luego, conecte el complemento hasta el evento de clic para la etiqueta de anclaje:

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

Si establece que los atributos iniciales de "visualización" para cada div sean "bloque" y "ninguno" respectivamente, deben cambiarse para mostrarse / ocultarse cuando se haga clic en el enlace.

Answer 6

Qué tal esto

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

Para que su HTML se vea como:

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

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

Answer 7

Utilicé esta forma de hacerlo para varios bloques sin crear un nuevo 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 porción js para todos estos casos:

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

Descrito here

Answer 8

intente esto http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/

Answer 9

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