Cómo ocultar el elemento Div de forma predeterminada y mostrarlo al hacer clic usando JavaScript y Bootstrap?

Ocultar elementos de una página web HTML y mostrarlos en un cierto botón Presione es bastante simple con la ayuda de CSS, Bootstrap y JavaScript. Hay múltiples enfoques para este problema. Sin embargo, ninguno de ellos puede considerarse óptimo o la "mejor" solución. Este artículo adoptará el enfoque de establecer la propiedad de visualización del DIV en el comienzo y cambiarla con la ayuda de JavaScript.

Paso 1: Configurar el documento HTML

El primer paso es comenzar creando un documento HTML, y dentro de ese archivo HTML, simplemente incluya un DIV y un botón con las siguientes líneas:

Este es el div
Haga clic para mostrar

En las líneas anteriores:

• A se está creando con una identificación específica que es "Hidediv"
• Se crea un botón con el etiqueta, con una propiedad OnClick establecida igual a Buttonclicked () función desde el archivo de script

En este punto, el documento HTML crea la siguiente página web en el navegador:

Se muestra un DIV con texto y un botón en la página web.

Paso 2: Configurar el archivo CSS o la etiqueta

Cree un archivo CSS y enléelo con el documento HTML o use un <estilo> Etiqueta. El Div aún no es lo suficientemente prominente. Por lo tanto, agregarle algo de estilo sería genial:

#hidediv
Color de fondo: Yellowgreen;
Altura: 150px;
Ancho: 150px;

En las líneas anteriores:

• El DIV es referencia usando su identificación como "Hidediv "
• Una altura y un ancho se especifica para el div
• Se ha dado un color de fondo al div

En este punto, el documento HTML se ve así:

Sin embargo, para ocultar el DIV al principio, agregue una línea más al archivo CSS que es:

Pantalla: ninguno;

Toda la parte CSS se convertiría en:

#hidediv
Pantalla: ninguno;
Color de fondo: Yellowgreen;
Altura: 150px;
Ancho: 150px;

Ahora, el HTML se ve así:

El DIV no se muestra en la página web HTML al principio.

Paso 3: Configurar el archivo JavaScript o la etiqueta

Ahora, para agregar funcionalidad al botón Presione, simplemente agregue las siguientes líneas de JavaScript al documento HTML utilizando un etiqueta o un archivo JavaScript vinculado:

función buttonclicked ()
$ ("#Hidediv").espectáculo();

En estas líneas:

• Se crea una función ButtonClicked () que se convocará con el clic del botón debido al al hacer clic() propiedad definida dentro del etiqueta
• El Div se hace referencia por su identificación que es "Hidediv"
• El método show () se llama en el div que habilita su mostrar propiedad

En este punto, la página web HTML funciona como lo siguiente:

El DIV se muestra en el botón Presione y el problema se ha abordado por completo.

Envolver

Se puede ocultar fácilmente un DIV al comienzo de una página web con la ayuda de la mostrar Propiedad del elemento HTML, y se puede mostrar fácilmente nuevamente en el botón Presione con JavaScript. Este artículo ha mostrado el procedimiento paso a paso para lograr la tarea en cuestión. Sin embargo, como se menciona al comienzo de este artículo, hay múltiples enfoques de este problema, y ​​ninguno de ellos puede considerarse como la mejor solución.