Ocultar y mostrar div (Elementos) fácilmente con jquery (Toggle)

closeHola! hace 6 years 2 months 12 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

Con la función toogle de jquery podemos ocultar y mostrar un div fácilmente con una sola linea de codigo, esta funcion se puede configurar el tiempo de ejecución haciendo un buen efecto al momento de mostrar/ocultar el div.

La función para ocultar se usa de la siguiente forma:

$(“#nombre_div”).toggle(200);

En donde “#nombre_div” es el ID del div que se quiere ocultar, “200” es la duración del efecto, hay que tener en cuenta, que si queremos que el div inicie oculto es necesario definir en el estilo del div el código “display:none”, les dejo un ejemplo funcionando.

Código Ejemplo:

<input type="button" value="Ocultar/Mostrar" onclick='$("#nombre_div").toggle(200);'>
<div id="nombre_div" style="background-color:#eeeeee;border:1px solid">
Este Div Se Oculta
</div>


Resultado:



Este Div Se Oculta



He creado un tutorial para aprender a usar jQuery, puedes verlo en…
Tutorial: Uso básico de jQuery (Parte 1)

You may also like...

38 Responses

  1. gina dice:

    me sirvio muchisimo!! gracias 😀

  2. Nene dice:

    Lo estoy intentando poner en un wordpress, tengo la DIV localizada pero no hay manera de que se oculte, he intentado poner el código tal cual al pie de la página pero tampoco se me oculta.

    Alguna idea de que puede estarlo bloqueando o donde está el conflicto?

    • Jodacame dice:

      Tienes cargado el Jquery en tu tema de wordpress??? …

      Saludos.

      • Mariano dice:

        Fijate que tengas cargado el jQuery, como te comento Jodacame en WordPress.

        Si no lo tienes cargado, te recomiendo que no agregues ningún plugin.
        (implemente, abres el HEADER de la plantilla WordPress y le agregas el código que hay en este sitio que te paso:

        http://pastebin.com/6C2MmWJT

        Luego donde quieres colocar el efecto, si también utiliza el header en donde pusiste el código que te pase, agregas esto:


        Fisica

        Moral

        Este contenido es para persona Fisica

        Este contenido es para persona Moral

        Saludos

      • Mariano dice:

        function oculta(id){
        var elDiv = document.getElementById(id); //se define la variable “elDiv” igual a nuestro div
        elDiv.style.display=’none’; //damos un atributo display:none que oculta el div
        }
        function muestra(id){
        var elDiv = document.getElementById(id); //se define la variable “elDiv” igual a nuestro div
        elDiv.style.display=’block’;//damos un atributo display:block que el div
        }
        window.onload = function(){/*hace que se cargue la función */
        /* “Mandamos como parametro el nombre de la Div para ocultar” */
        oculta(‘Pmoral’); /*Ocultamos Pmoral*/
        }


        Fisica

        Moral

        Este contenido es para persona Fisica

        Este contenido es para persona Moral

        • Maris dice:

          El problema de esa función es que en cuanto tienes más de dos divs (por ejp. 12) para ocultar y mos trar se vuelve un poco loca.

          • jodacame dice:

            para realizar ese tipo de efectos mas avanzados ya toca crear métodos propios y hacer uso de las funciones show y hide y tener un control de cada div para evitar perder el control de los elementos.

            También se puede hacer solo con la función toggle, lo que hay que revisar es que se este accediendo bien a cada elemento con su respectivo selector.
            Saludos.

          • Maris dice:

            Gracias x contestar tan rápido jocadame, el problema que tengo es que dichas capas que quiero mostrar y ocultar están en la mísma posición y ademas cada una de ellas tiene 5 o 7 divmaps, y creo que x eso se vuelve loca, de hecho he tenido que comentar una de ells para que las otras dos se viesen bien, el ejp. lo puedes mirar en mi web, te lo agradecería de veras, te paso el enlace:
            http://www.caricaturasmontenegro.es/html/caricaturas.html

            Si no lo haces lo entenderé, pero ahí veras xk no puedo usar el toggle, ya que cada thumb debe mostrar su div y ocultar todos los demás.

          • jodacame dice:

            Para ese tipo de efectos, te recomiendo que cambies un poco la lógica de como muestras la galería, te recomiendo este post que hice algún tiempo y es muy fácil de implementar. http://blog.jodacame.com/visor-de-imagenes-simple-con-jquery.html 
            Saludos.

          • Maris dice:

            Mil gracias jocadame, lo mirare y te cuento 😉

  3. hey amigo buenos días, Sabes tengo un pequeño problema, estoy haciendo un buscador de artículos de ferretería, el los carga en una capa con ajax todo bien, pero quiero que sean (draggable) para arrastrarlos a un carrito de forma dinámica que sucede los que vienen del ajax que es una búsqueda php no adquieren la función pero si los declaro manualmente si.

    • Jodacame dice:

      es por que estas activando el drag en el documento principal y lo que traer con ajax no se ve afectado, debes agregarle el JS en el onReady del jquery a los datos que llegan por ajax, es decir: lo que llega por el ajax debe venir con el js del drag incluido.

      Saludos.

    • Mariano dice:

      Si me permitís un consejo, a mi ese efecto de tirar el contenido tipo ajax, NO ME GUSTA!

      Tene en cuenta que a un sitio como es la ferreteria, van a ingresar gente que no debe estar muy afianzado con ese tipo de efectos. Yo te diría, que en todo caso si queres hacerlo original, diseñes un botón que en vez de decir (COMPRAR) o (AGREGAR) que diga: (LO QUIERO) o alguna otra cosa, que sea amigable al usuario. Asi mismo, que se cargue el producto en AJAX y en la misma pagina, para no ir a otro hipervinculo, y que al usuario se le cierre.

      Es bueno en ese tipo de sitios Web, hacerlos amigables para quien lo visita.
      Con efectos, pero facil de utilizar.

      Saludos

  4. juan dice:

    una consulta es compatible con todos los navegadores ? gracias.

    • Mariano dice:

      Hola amigo. Yo lo probé en Opera, Firefox, Internet explorer, Google Chrome. Y FUNCIONO PERFECTAMENTE.!

      Igual debemos tener en cuenta, que LAMENTABLEMENTE, no todos los exploradores funcionan igual. Aunque deberían pensar en hacer un explorador con las mismas funciones.

      Yo tengo otro problema. Haber si alguien me puede ayudar.
      (ALGUIEN SABE COMO ESCONDER EL BOTÓN CUANDO SE MUESTRA EL CONTENIDO)

      Saludos

  5. Lara dice:

    Hola,

    gracias por la ayuda. ¿Podrías ayudarme? Necesito saber cómo personalizar ese código. Quiero que el botón de “Mostrar/Ocultar” sea una imagen. ¿Cómo puedo conseguirlo?

    Muchas gracias por todo y un saludo.

  6. Walter dice:

    Esta herramienta funciona con ASP, lo estoy probando pero no realiza el efecto, algun consejo????

  7. Jose Vazquez dice:

    Hola se podría hacer que el div que aparece y desaparece empezase oculto

    gracias

  8. ricardo dice:

    Hola gracias por el código, tengo una pregunta, como puedo alinear el botón en el centro de un sitio!

  9. Luis Javier dice:

    Hola me ha funcionado de maravilla y solo tengo una duda: Se puede saber cuando esta desplegado el panel y cuando no?
    Saludos 😉

  10. isacko dice:

    Que tal ? lo probe en html y si funciono pero si lo agrego en un boton asp lo hace pero recarga la pagina y queda igual el div alguna solucion ? Gracias!

  11. Rikardo dice:

    Muy bueno el codigo pero tengo una preguntica como haria yo si tengo varios divs? es decir doy clic en uno y se muestra todo perfecto pero si quiero es mostrar otro div y que se me oculte automaticamente el que mostre de primero… Eso se podria hacer?

    Muchas Gracias!

  12. Jodacame dice:
    <input type="button" value="Ocultar/Mostrar 1" onclick='hide();$("#nombre_div1").toggle(200);'>
    <input type="button" value="Ocultar/Mostrar 2" onclick='hide();$("#nombre_div2").toggle(200);'>
    <input type="button" value="Ocultar/Mostrar 3" onclick='hide();$("#nombre_div3").toggle(200);'>
     
     
    <div class="hide" id="nombre_div1" style="background-color:#eeeeee;border:1px solid">
    Este Div1 Se Oculta
    </div>
     
    <div class="hide" id="nombre_div2" style="background-color:#eeeeee;border:1px solid">
    Este Div2 Se Oculta
    </div>
     
    <div class="hide" id="nombre_div3" style="background-color:#eeeeee;border:1px solid">
    Este Div3 Se Oculta
    </div>
     
    <script>
    function hide()
    {
       $(".hide").hide();
    }
    </sript>

    Es lo que se me ocurrio en el momento, espero que te sea de utilidad.

  13. Rikardo dice:

    Excelente… Pero tengo un pequeño detalle al momento de que cargue la pagina los divs tienen que estar ocultos… Ya despues haria el proceso que me mostraste que esta super excelente!

    Te lo agradeceria con esta ultima inquietud! Gracias!

    • Rikardo dice:

      Me respondo a mi mismo jejejeje para todos! En el estilo del div ahi que colocar display:none ñ.ñ
      Gracias por la respuesta me ayudo de muchooo! Seguire de cerca este Blog!

    • Jodacame dice:

      usando el ejemplo anterior, solo debes agregar en tu CSS la clase.

      .hide{
      display:none;
      }

      y listo con esto cargas los divs ocultos.

  14. Rene dice:

    Muchas gracias

  15. Albert dice:

    Hola muy buen blog, tengo una duda: En mi caso los div tienen que estar ocultos excepto uno y cuando oprima otro boton me salga el otro y se me oculte este. Para mi seria mejor en ves de boton una imagen ya que deseo mostrar tipo una galeria y al darle clic a una de estas imagenes se me muestre el div, realmente me va a mostrar un grafico cada uno, es que tengo muy pocos conocimientos de todo esto. Agradeceria su ayuda, disculpa mi ignorancia.
    Resumen: Se muestre uno al abrir la pagina, al dar clic en otro “boton”(seria mejor imagen) se muestre este otro y se oculte el anterior, he probado de miles de formas pero ninguna funciona.
    Saludos

  16. Joe CoolSv dice:

    Justo buscaba algo así, de fácil, sin tanto código, muchisimas gracias.

  17. Enrique Fe dice:

    Me gusta el minimalismo de su aplicación jquery xD

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *