3

Al entrar a la web el elemento comienza estando oculto, y al presionar un boton lo muestro, como hago para que al volver a presionar el boton se vuelva a poner oculto ?

$(document).ready(main);

    $("#mostrar_fileupload_contrato").click(function(){
        $('#ArchivoContrato').show(1000,function() {

        });

});

Aca tengo el boton que muestra el file upload y el fileupload oculto

<button type="button" class="btn btn-info" id='mostrar_fileupload_contrato' style="margin-left: 10px">Subir contrato firmado</button>       


        <form>
         <div class="form-group" id="ArchivoContrato" style="display:none">
             <label for="exampleFormControlFile1">Sube tu archivo</label>
             <input type="file" class="form-control-file"  >
                </div>
            </form>

1 respuesta 1

4

En lugar de usar show() puedes usar toggle() asi:

$( document ).ready(function() {

    $("#mostrar_fileupload_contrato").click(function(){
        $('#ArchivoContrato').toggle(1000,function() {

        });
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-info" id='mostrar_fileupload_contrato' style="margin-left: 10px">Subir contrato firmado</button>       


        <form>
         <div class="form-group" id="ArchivoContrato" style="display:none">
             <label for="exampleFormControlFile1">Sube tu archivo</label>
             <input type="file" class="form-control-file"  >
                </div>
            </form>

2
  • Buenisima respuesta y si quisiera agregar un elemento extra? para que se oculten / muestren dos ids
    – n00bz
    el 23 sep. 2019 a las 18:52
  • 1
    Seria igual. Tambien puedes seleccionar varios elementos y separarlos por comas en tu selector jQuery.
    – alanfcm
    el 23 sep. 2019 a las 18:53

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.