1

quiero hacer que al pulsar un div (Crear cuenta) se cargue el formulario de register y se oculte el de login y viceversa, nose si me explico.

Tengo esto:

$("#register").click(function(){

    $('#register-form').toggle(500);

});

Pero quiero que me oculte #login-form , porque si no se oculta, se pone encima y queda antiestetico. Nosé si me puedan ayudar, gracias de antemano.

3 respuestas 3

1

Con jquery es tan sencillo como $("selector").hide() o $("selector").show()

sería algo así:

$("#register").click(function(){
  $("#login-form").hide();
  $("#register-form").show();
});

$("#login").click(function(){
  $("#register-form").hide();
  $("#login-form").show();
});

Snippet (no conozco tu codigo, es un ejemplo):

#register {
  background-color: blue;
  min-height:10px;
}

#register {
  background-color: blue;
  min-height:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="register">
  <h2>REGISTER</h2>
  <form id="register-form">
    <input type="text">
  </form>
</div>

<div id="login">
  <h2>LOGIN</h2>
  <form id="login-form">
    <input type="text">
  </form>
</div>

1

Lo podes hacer modificando el display del div con javascript:

  • Para ocultar:

    var div = document.querySelector("#idDiv"); div.style.display = "none";

  • Para volver a mostrar:

    div.style.display = "block";

Espero que te sirva.

1

Lo cierto es que podrías usar el selector múltiple de jQuery junto con .toggle(), como propnes.

El selector múltiple funciona igual que cualquier otro selector en jQuery, por ejemplo:

jQuery('selector1, selector2').miFuncion()

se ejecutaría miFuncion() para el elemento que cumpla con el selector1 y con el selector2.

De esta forma:

jQuery('selector1, selector2').toggle();

Cambiaría el display tanto del elemento 1 como del elemento 2.

Te dejo un snippet para que lo puedas comprobar.

jQuery(document).on('click', '#toggleButton', function() {
  jQuery('#div1, #div2').toggle(500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div1">
SOY EL DIV 1
</div>

<div id="div2" style="display: none;">
SOY EL DIV 2
</div>

<button id="toggleButton">TOGGLE</button>

1
  • Que bueno! no conocía la función toggle, y veo que es muy sencillo el código. Me lo apunto!! Creo que el OP @miguelalvarez.com debería de marcar esta respuesta ya que es mas parecida a lo que el pedía
    – x3k
    el 7 jun. 2019 a las 14:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.