Interruttore / commutatore div (jquery)

Question

Vorrei realizzare un compito abbastanza semplice (spero!)

Ho due tag div e 1 tag di ancoraggio, in questo modo:

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

Quello che voglio realizzare è utilizzare il tag di ancoraggio per passare tra i due tag div, nascondere l'uno e mostrare l'altro e viceversa.

Come può essere fatto nel modo migliore?

Con i migliori saluti.

Answer 1

Poiché un div è inizialmente nascosta, si può semplicemente chiamare ginocchiera per entrambi i div:

<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

Penso che si desidera in questo modo:

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

o

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

Questo è reso possibile da JQuery

Spero che questo aiuti ...

Answer 3

Che ne dite di questo

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

Per la vostra HTML cercando come:

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

Ehi, va bene! Una linea! I <3 jQuery.

Answer 4

Si potrebbe scrivere un semplice plugin jQuery per fare questo. Il plugin sarà simile:

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

Poi collegare il plugin fino a l'evento click per il tag anchor:

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

A condizione che si imposta la 'visualizzazione' iniziale attributi per ogni div di essere 'blocco' e 'none', rispettivamente, dovrebbero passare a essere mostrato / nascosto quando il link viene cliccato.

Answer 5

http: //www.webtrickss .com / javascript / jquery-slideToggle-iscrizione-forma-e-login-form /

Answer 6

Credo che questo funziona

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

Ho usato questo modo di fare che per più blocchi senza evocare nuova 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>

Poi una porzione js per tutti questi casi:

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

qui

Answer 8

Questo è come i Spostare due div allo stesso tempo:

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

funziona!

Answer 9

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