ℹ️ Skipped - page is already crawled
| Filter | Status | Condition | Details |
|---|---|---|---|
| HTTP status | PASS | download_http_code = 200 | HTTP 200 |
| Age cutoff | PASS | download_stamp > now() - 6 MONTH | 0.2 months ago |
| History drop | PASS | isNull(history_drop_reason) | No drop reason |
| Spam/ban | PASS | fh_dont_index != 1 AND ml_spam_score = 0 | ml_spam_score=0 |
| Canonical | PASS | meta_canonical IS NULL OR = '' OR = src_unparsed | Not set |
| Property | Value |
|---|---|
| URL | https://blogandweb.com/mostrar-ocultar-div-javascript/ |
| Last Crawled | 2026-04-07 06:30:16 (4 days ago) |
| First Indexed | 2020-10-12 06:37:56 (5 years ago) |
| HTTP Status Code | 200 |
| Meta Title | Mostrar-ocultar DIV con Javascript: 3 Métodos - Blog and Web |
| Meta Description | En este pequeño tutorial te mostraremos 3 sencillos métodos para mostrar-ocultar un DIV con Javascript: Con Javascript puro, JQuery. y Bootstrap. |
| Meta Canonical | null |
| Boilerpipe Text | Javascript
Una de las tareas más básicas que se suelen ocupar al diseñar la experiencia de interacción en un sitio web es
mostrar-ocultar un DIV con
Javascript
o en general de cualquier elemento HTML. En este pequeño tutorial te mostraremos 3 métodos, el primero usando sólo Javascript y el segundo haciendo uso de la, todavía bastante popular, librería
JQuery
.
Mostrar-ocular DIV con Javascript puro
Primero haremos uso de una sencilla función que revisa el estado del elemento HTML y lo oculta o muestra según el resultado.
<
script type
=
"text/javascript"
>
const
mostrar
=
(
elemento
)
=>
{
elemento
.
style
.
display
=
'block'
;
}
const
ocultar
=
(
elemento
)
=>
{
elemento
.
style
.
display
=
'none'
;
}
const
mostrarOcultar
=
(
id
)
=>
{
let
div
=
document
.
getElementById
(
id
)
;
if
(
window
.
getComputedStyle
(
div
)
.
display
!==
'none'
)
{
ocultar
(
div
)
;
return
false
;
}
mostrar
(
div
)
;
}
<
/
script
>
Como cualquier otro código de Javascript puedes colocarlo entre las etiquetas
<head></head>
o agregarlo a tu
archivo .js externo
.
Esta función requiere que se indique el identificador
ID
del elemento HTML que se desea mostrar-ocultar y su funcionamiento es básicamente el siguiente:
Obtiene el objecto DOM basado en la ID indicada.
Obtiene la condición actual real de la propiedad display del elemento usando
getComputedStyle
.
Cualquier condición diferente a
none
significa que es muy posible que elemento es visible y por tanto lo oculta. De otro modo, lo muestra porque implica que estaba oculto.
Ejemplo de ocultar/mostrar div:
Supongamos que tenemos un elemento HTML:
DIV
con un
ID
“mi-super-contenido”; similar al siguiente:
<
div
id
=
"
mi-super-contenido
"
>
Aquí va mi contenido secreto, pero no tanto.
</
div
>
Y queremos mostrarla con enlace que dice: “Mostrar/ocultar contenido”. Muy claro ¿no? Bueno, lo único que debemos hacer es agregar un llamada la función de Javascript que definimos arriba y el ID del elemento que queremos afectar, en este caso “mi-super-contenido”. El resultado sería algo así:
<
a
style
=
'
cursor
:
pointer
;
'
onclick
=
"
mostrarOcultar
(
'mi-super-contenido'
)
"
>
Mostrar/ocultar contenido
</
a
>
Y listo. Ahora cuando tus lectores den click a ese link, el contenido del DIV se mostrará o ocultará según corresponda.
Nota: Si el estado inicial del contenido es oculto, es necesario agregar el CSS correspondiente para ocultar el elemento. En este caso:
#mi-super-contenido
{
display
:
none
;
}
Que se puede agregar a tu archivo externo .css.
Mostrar-ocultar (toggle) DIV con jQuery
Si ya estás usando la librería
jQuery
en tu sitio, no es necesario crear una función nueva y usar la función
toggle
, incluida en jQuery.
Por ejemplo, supongamos que el DIV al que le vamos a cambiar su visualización tiene ID:
"mi-super-contenido"
y enlace que lo muestra tiene como ID:
"mostrar-super-contenido"
. Entonces el Javascript sería:
<
script
>
$
(
"#mostrar-super-contenido"
)
.
click
(
function
(
)
{
$
(
"#mi-super-contenido"
)
.
toggle
(
)
;
}
)
;
<
/
script
>
Y el HTML sería el siguiente:
<
a
id
=
"
mostrar-super-contenido
"
>
Mostrar/ocultar contenido.
</
a
>
<
div
id
=
"
mi-super-contenido
"
>
Aquí va mi contenido secreto, pero no tanto.
</
div
>
El código usando JQuery es mucho más compacto pero claro, se debe a que la función real esta dentro de la librería.
Mostrar-ocultar elemento cuando usas Bootstrap
Bootstrap
5 proporciona una forma sencilla de mostrar y ocultar grandes cantidades de contenido utilizando su función de colapsar (collapse).
Paso 1: Agregar la clase `.collapse`
El primer paso es indicar qué elemento será colapsable agregando la clase
.collapse
a un elemento
<div>
. Por ejemplo:
<
div id
=
"demo"
class
=
"collapse"
>
Lorem ipsum dolor text
...
.
<
/
div
>
Paso 2: Agregar un botón o enlace para controlar el elemento colapsable
A continuación, necesitarás agregar un botón o enlace que controle la acción de mostrar y ocultar el elemento colapsable. Para ello, utiliza la clase
data-bs-toggle="collapse"
en un elemento
<button>
o
<a>
. Luego, agrega el atributo
data-bs-target="#id"
para conectar el botón o enlace con el elemento colapsable. Aquí tienes un ejemplo:
<
button data
-
bs
-
toggle
=
"collapse"
data
-
bs
-
target
=
"#demo"
>
Collapsible
<
/
button
>
Si prefieres utilizar un enlace en lugar de un botón, puedes reemplazar el elemento
<button>
por un elemento
<a>
y utilizar el atributo
href
en lugar de
data-bs-target
. Por ejemplo:
<
a href
=
"#demo"
data
-
bs
-
toggle
=
"collapse"
>
Collapsible
<
/
a
>
Paso 3: Mostrar el contenido por defecto
Por defecto, el contenido colapsable estará oculto. Si deseas mostrar el contenido por defecto, puedes agregar la clase
.show
al elemento colapsable. Aquí tienes un ejemplo:
<
div id
=
"demo"
class
=
"collapse show"
>
Lorem ipsum dolor text
...
.
<
/
div
>
Conclusión
Estas 3 soluciones son bastante básicas pero soluciones más complejas se pueden construir usando el mismo principio. También cabe mencionar que como muchos problemas en programación, hay varias formas de resolver el mismo, algunas soluciones son más adecuadas o completas que otras pero yo te recomendaría la que tú mejor entiendas, de ese modo si requieres adaptarla o mejorarla tendrás probabilidad de éxito. |
| Markdown | [](https://blogandweb.com/ "Blog and Web")
- [Home](https://blogandweb.com/)
- [WordPress](https://blogandweb.com/wordpress/)
- [GNU/Linux](https://blogandweb.com/gnu-linux/)
- [](https://blogandweb.com/en/show-hide-div-with-javascript/)
- [](https://blogandweb.com/pt/mostrar-ocultar-div-javascript/)
[Javascript](https://blogandweb.com/javascript/)
# Mostrar-ocultar DIV con Javascript: 3 Métodos
Una de las tareas más básicas que se suelen ocupar al diseñar la experiencia de interacción en un sitio web es **mostrar-ocultar un DIV con *Javascript*** o en general de cualquier elemento HTML. En este pequeño tutorial te mostraremos 3 métodos, el primero usando sólo Javascript y el segundo haciendo uso de la, todavía bastante popular, librería [JQuery](https://jquery.com/).
**Contenidos** [ocultar](https://blogandweb.com/mostrar-ocultar-div-javascript/)
[1 Mostrar-ocular DIV con Javascript puro](https://blogandweb.com/mostrar-ocultar-div-javascript/#Mostrar-ocular_DIV_con_Javascript_puro)
[1\.1 Ejemplo de ocultar/mostrar div:](https://blogandweb.com/mostrar-ocultar-div-javascript/#Ejemplo_de_ocultarmostrar_div)
[2 Mostrar-ocultar (toggle) DIV con jQuery](https://blogandweb.com/mostrar-ocultar-div-javascript/#Mostrar-ocultar_toggle_DIV_con_jQuery)
[3 Mostrar-ocultar elemento cuando usas Bootstrap](https://blogandweb.com/mostrar-ocultar-div-javascript/#Mostrar-ocultar_elemento_cuando_usas_Bootstrap)
[4 Conclusión](https://blogandweb.com/mostrar-ocultar-div-javascript/#Conclusion)
## Mostrar-ocular DIV con Javascript puro
***
Primero haremos uso de una sencilla función que revisa el estado del elemento HTML y lo oculta o muestra según el resultado.
```
<script type="text/javascript">
const mostrar = (elemento) => {
elemento.style.display = 'block';
}
const ocultar = (elemento) => {
elemento.style.display = 'none';
}
const mostrarOcultar = (id) => {
let div = document.getElementById(id);
if( window.getComputedStyle(div).display !== 'none' ){
ocultar(div);
return false;
}
mostrar(div);
}
</script>
```
Como cualquier otro código de Javascript puedes colocarlo entre las etiquetas `<head></head>` o agregarlo a tu [archivo .js externo](https://blogandweb.com/crear-un-archivo-js-para-nuestras-funciones-de-javascript/).
Esta función requiere que se indique el identificador `ID` del elemento HTML que se desea mostrar-ocultar y su funcionamiento es básicamente el siguiente:
1. Obtiene el objecto DOM basado en la ID indicada.
2. Obtiene la condición actual real de la propiedad display del elemento usando `getComputedStyle`.
3. Cualquier condición diferente a `none` significa que es muy posible que elemento es visible y por tanto lo oculta. De otro modo, lo muestra porque implica que estaba oculto.
### Ejemplo de ocultar/mostrar div:
***
Supongamos que tenemos un elemento HTML: `DIV` con un `ID` “mi-super-contenido”; similar al siguiente:
```
<div id="mi-super-contenido">Aquí va mi contenido secreto, pero no tanto.</div>
```
Y queremos mostrarla con enlace que dice: “Mostrar/ocultar contenido”. Muy claro ¿no? Bueno, lo único que debemos hacer es agregar un llamada la función de Javascript que definimos arriba y el ID del elemento que queremos afectar, en este caso “mi-super-contenido”. El resultado sería algo así:
```
<a style='cursor: pointer;' onclick="mostrarOcultar('mi-super-contenido')">
Mostrar/ocultar contenido
</a>
```
Y listo. Ahora cuando tus lectores den click a ese link, el contenido del DIV se mostrará o ocultará según corresponda.
Nota: Si el estado inicial del contenido es oculto, es necesario agregar el CSS correspondiente para ocultar el elemento. En este caso:
```
#mi-super-contenido { display:none; }
```
Que se puede agregar a tu archivo externo .css.
## Mostrar-ocultar (toggle) DIV con jQuery
***
Si ya estás usando la librería [jQuery](https://jquery.com/) en tu sitio, no es necesario crear una función nueva y usar la función [`toggle`](https://api.jquery.com/toggle/), incluida en jQuery.
Por ejemplo, supongamos que el DIV al que le vamos a cambiar su visualización tiene ID: `"mi-super-contenido"` y enlace que lo muestra tiene como ID: `"mostrar-super-contenido"`. Entonces el Javascript sería:
```
<script>
$( "#mostrar-super-contenido" ).click( function() {
$( "#mi-super-contenido" ).toggle();
});
</script>
```
Y el HTML sería el siguiente:
```
<a id="mostrar-super-contenido">Mostrar/ocultar contenido.</a>
<div id="mi-super-contenido">Aquí va mi contenido secreto, pero no tanto.</div>
```
El código usando JQuery es mucho más compacto pero claro, se debe a que la función real esta dentro de la librería.
## Mostrar-ocultar elemento cuando usas Bootstrap
***
[Bootstrap](https://getbootstrap.com/) 5 proporciona una forma sencilla de mostrar y ocultar grandes cantidades de contenido utilizando su función de colapsar (collapse).
Paso 1: Agregar la clase \`.collapse\`
El primer paso es indicar qué elemento será colapsable agregando la clase `.collapse` a un elemento `<div>`. Por ejemplo:
```
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
```
Paso 2: Agregar un botón o enlace para controlar el elemento colapsable
A continuación, necesitarás agregar un botón o enlace que controle la acción de mostrar y ocultar el elemento colapsable. Para ello, utiliza la clase `data-bs-toggle="collapse"` en un elemento `<button>` o `<a>`. Luego, agrega el atributo `data-bs-target="#id"` para conectar el botón o enlace con el elemento colapsable. Aquí tienes un ejemplo:
```
<button data-bs-toggle="collapse" data-bs-target="#demo">Collapsible</button>
```
Si prefieres utilizar un enlace en lugar de un botón, puedes reemplazar el elemento `<button>` por un elemento `<a>` y utilizar el atributo `href` en lugar de `data-bs-target`. Por ejemplo:
```
<a href="#demo" data-bs-toggle="collapse">Collapsible</a>
```
Paso 3: Mostrar el contenido por defecto
Por defecto, el contenido colapsable estará oculto. Si deseas mostrar el contenido por defecto, puedes agregar la clase `.show` al elemento colapsable. Aquí tienes un ejemplo:
```
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
```
## Conclusión
***
Estas 3 soluciones son bastante básicas pero soluciones más complejas se pueden construir usando el mismo principio. También cabe mencionar que como muchos problemas en programación, hay varias formas de resolver el mismo, algunas soluciones son más adecuadas o completas que otras pero yo te recomendaría la que tú mejor entiendas, de ese modo si requieres adaptarla o mejorarla tendrás probabilidad de éxito.
Tal vez te interese
***
### [Modo obscuro/dark mode en tu sitio en 3 pasos](https://blogandweb.com/diseno-dark-mode/)
mayo 4, 2020
### [Redireccionar con Javascript en 1 función](https://blogandweb.com/redireccionar-con-javascript/)
marzo 2, 2020
### [Botón de atrás y adelante con Javascript](https://blogandweb.com/boton-de-atras-y-adelante-javascript/)
marzo 2, 2017
2 comentarios sobre Mostrar-ocultar DIV con Javascript: 3 Métodos
***
###### Iván [junio 8, 2007 a las 9:46 pm](https://blogandweb.com/mostrar-ocultar-div-javascript/#comment-8)
Hola.
He implementado esta función a mi blog y me he encontrado con un problema. No puedo añadirlo en más de una entrada ya que el div afecta a todas por igual y solo una se oculta. O se muestran todas. ¿Habría alguna manera de aplicar la etiqueta a más de un post seguido?
Muchas gracias.
Un saludo\!
Responder
###### Serenity [octubre 8, 2007 a las 12:14 pm](https://blogandweb.com/mostrar-ocultar-div-javascript/#comment-3834)
Hola\!
Queria saber si existe la posibilidad de ocultar algun contenido de una entrada y que se active unicamente cuando uno publica un comentario. Saludos y gracias\!
Responder
Deja un comentario [Cancelar respuesta](https://blogandweb.com/mostrar-ocultar-div-javascript/#respond)
***
[](https://blogandweb.com/ "Blog and Web")
#####
##### Buscar |
| Readable Markdown | [Javascript](https://blogandweb.com/javascript/)
Una de las tareas más básicas que se suelen ocupar al diseñar la experiencia de interacción en un sitio web es **mostrar-ocultar un DIV con *Javascript*** o en general de cualquier elemento HTML. En este pequeño tutorial te mostraremos 3 métodos, el primero usando sólo Javascript y el segundo haciendo uso de la, todavía bastante popular, librería [JQuery](https://jquery.com/).
## Mostrar-ocular DIV con Javascript puro
***
Primero haremos uso de una sencilla función que revisa el estado del elemento HTML y lo oculta o muestra según el resultado.
```
<script type="text/javascript">
const mostrar = (elemento) => {
elemento.style.display = 'block';
}
const ocultar = (elemento) => {
elemento.style.display = 'none';
}
const mostrarOcultar = (id) => {
let div = document.getElementById(id);
if( window.getComputedStyle(div).display !== 'none' ){
ocultar(div);
return false;
}
mostrar(div);
}
</script>
```
Como cualquier otro código de Javascript puedes colocarlo entre las etiquetas `<head></head>` o agregarlo a tu [archivo .js externo](https://blogandweb.com/crear-un-archivo-js-para-nuestras-funciones-de-javascript/).
Esta función requiere que se indique el identificador `ID` del elemento HTML que se desea mostrar-ocultar y su funcionamiento es básicamente el siguiente:
1. Obtiene el objecto DOM basado en la ID indicada.
2. Obtiene la condición actual real de la propiedad display del elemento usando `getComputedStyle`.
3. Cualquier condición diferente a `none` significa que es muy posible que elemento es visible y por tanto lo oculta. De otro modo, lo muestra porque implica que estaba oculto.
### Ejemplo de ocultar/mostrar div:
***
Supongamos que tenemos un elemento HTML: `DIV` con un `ID` “mi-super-contenido”; similar al siguiente:
```
<div id="mi-super-contenido">Aquí va mi contenido secreto, pero no tanto.</div>
```
Y queremos mostrarla con enlace que dice: “Mostrar/ocultar contenido”. Muy claro ¿no? Bueno, lo único que debemos hacer es agregar un llamada la función de Javascript que definimos arriba y el ID del elemento que queremos afectar, en este caso “mi-super-contenido”. El resultado sería algo así:
```
<a style='cursor: pointer;' onclick="mostrarOcultar('mi-super-contenido')">
Mostrar/ocultar contenido
</a>
```
Y listo. Ahora cuando tus lectores den click a ese link, el contenido del DIV se mostrará o ocultará según corresponda.
Nota: Si el estado inicial del contenido es oculto, es necesario agregar el CSS correspondiente para ocultar el elemento. En este caso:
```
#mi-super-contenido { display:none; }
```
Que se puede agregar a tu archivo externo .css.
## Mostrar-ocultar (toggle) DIV con jQuery
***
Si ya estás usando la librería [jQuery](https://jquery.com/) en tu sitio, no es necesario crear una función nueva y usar la función [`toggle`](https://api.jquery.com/toggle/), incluida en jQuery.
Por ejemplo, supongamos que el DIV al que le vamos a cambiar su visualización tiene ID: `"mi-super-contenido"` y enlace que lo muestra tiene como ID: `"mostrar-super-contenido"`. Entonces el Javascript sería:
```
<script>
$( "#mostrar-super-contenido" ).click( function() {
$( "#mi-super-contenido" ).toggle();
});
</script>
```
Y el HTML sería el siguiente:
```
<a id="mostrar-super-contenido">Mostrar/ocultar contenido.</a>
<div id="mi-super-contenido">Aquí va mi contenido secreto, pero no tanto.</div>
```
El código usando JQuery es mucho más compacto pero claro, se debe a que la función real esta dentro de la librería.
## Mostrar-ocultar elemento cuando usas Bootstrap
***
[Bootstrap](https://getbootstrap.com/) 5 proporciona una forma sencilla de mostrar y ocultar grandes cantidades de contenido utilizando su función de colapsar (collapse).
Paso 1: Agregar la clase \`.collapse\`
El primer paso es indicar qué elemento será colapsable agregando la clase `.collapse` a un elemento `<div>`. Por ejemplo:
```
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
```
Paso 2: Agregar un botón o enlace para controlar el elemento colapsable
A continuación, necesitarás agregar un botón o enlace que controle la acción de mostrar y ocultar el elemento colapsable. Para ello, utiliza la clase `data-bs-toggle="collapse"` en un elemento `<button>` o `<a>`. Luego, agrega el atributo `data-bs-target="#id"` para conectar el botón o enlace con el elemento colapsable. Aquí tienes un ejemplo:
```
<button data-bs-toggle="collapse" data-bs-target="#demo">Collapsible</button>
```
Si prefieres utilizar un enlace en lugar de un botón, puedes reemplazar el elemento `<button>` por un elemento `<a>` y utilizar el atributo `href` en lugar de `data-bs-target`. Por ejemplo:
```
<a href="#demo" data-bs-toggle="collapse">Collapsible</a>
```
Paso 3: Mostrar el contenido por defecto
Por defecto, el contenido colapsable estará oculto. Si deseas mostrar el contenido por defecto, puedes agregar la clase `.show` al elemento colapsable. Aquí tienes un ejemplo:
```
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
```
## Conclusión
***
Estas 3 soluciones son bastante básicas pero soluciones más complejas se pueden construir usando el mismo principio. También cabe mencionar que como muchos problemas en programación, hay varias formas de resolver el mismo, algunas soluciones son más adecuadas o completas que otras pero yo te recomendaría la que tú mejor entiendas, de ese modo si requieres adaptarla o mejorarla tendrás probabilidad de éxito. |
| Shard | 146 (laksa) |
| Root Hash | 13433099705574260146 |
| Unparsed URL | com,blogandweb!/mostrar-ocultar-div-javascript/ s443 |