Cómo mostrar y ocultar Divs JavaScript en CSS

Usando una combinación de código JavaScript y hoja de estilo en cascada, puede causar elementos de división en sus páginas web para aparecer y desaparecer con la interacción del usuario. Puede establecer inicialmente un elemento que se oculta en el CSS, y luego llamar a una función JavaScript en la interacción del usuario con otro elemento en su página. Cuando el usuario interactúa con este segundo elemento, se puede cambiar la visibilidad del elemento principal mediante la alteración de su nombre de clase. El nombre de la clase determina las propiedades CSS que se aplican a un elemento HTML, incluyendo visibilidad y mostrar propiedades.

Instrucciones

1 Crear el elemento div HTML que desea mostrar y ocultar. Agregue el siguiente código de ejemplo a su página:

<Div id = "contenido" class = "ocultar"> Este es el contenido </ div>

Puede sustituir el contenido del elemento con cualquier texto u otros datos que desee, pero asegúrese de incluir los atributos id y class. El código JavaScript utilizará el atributo ID para identificar y modificar el elemento, mientras que el nombre de la clase determinará el estilo aplicado a él en cualquier momento.

2 Añadir un elemento interactivo a su página. Para llamar a su función de JavaScript en la interacción del usuario con la página, es necesario configurar un elemento con un detector de eventos. Agregue el código siguiente inmediatamente antes de que el elemento de contenido que usted está planeando para mostrar y ocultar:

<Div onclick = "de palanca (" contenido ")"> Aquí está el encabezamiento - haga clic para mostrar u ocultar el contenido </ div>

Puede reemplazar el contenido de este div con el texto que desee. Cuando el usuario hace clic en este div, que hará que la función JavaScript para alternar la visibilidad del elemento de contenido. El atributo "onclick" detector de eventos pasa el ID del elemento de contenido como un parámetro a la función de JavaScript.

3 Añadir una sección de estilo a su página. Para implementar mostrar y ocultar su elemento, es necesario configurar las propiedades de pantalla. Agregue el siguiente código de estilo a la sección de cabecera de la página HTML:

<Style type = "text / css">
.hide {display: none; }
.show {display: block; }
</ Style>

Este código especifica las propiedades de la pantalla para cuando se muestra u oculta el elemento. El código CSS identifica el elemento mediante su atributo nombre de la clase.

4 Añadir una función JavaScript para su página. Inserte la sección siguiente secuencia de comandos en su zona de la cabeza HTML:

<Script type = "text / javascript">
var isVisible = false;
una función activar (elemento) {
si (isVisible) {
isVisible = false;
document.getElementById (punto) .className = 'ocultar'; }
else {
isVisible = true;
document.getElementById (punto) .className = 'show'; }}
</ Script>

La función de conmutación utiliza una variable para controlar el estado de visibilidad actual del elemento. Utilizando el parámetro atributo del elemento de identificación, el código altera el nombre de la clase div, alternando entre mostrar y ocultar. El nombre de la clase hará que las propiedades de visualización de CSS para el elemento de alternar cuando esta función se ejecuta.

5 Guarde el archivo HTML. Abra su página en un navegador Web. Debería ver el texto de la partida pero no el contenido primera vez que se ve la página. Haga clic en el título para ver el efecto de su función. Cada vez que se pulsa el div partida, el div contenido debe aparecer o desaparecer o bien, alternando entre los dos. El encabezamiento div debe permanecer visible en todo momento.

Consejos y advertencias

• Uso de bibliotecas de JavaScript como jQuery, puede agregar efectos de animación al mostrar y ocultar elementos.
• Asegúrese de que esté claro a los usuarios cómo acceder a su contenido oculto o pueden perder.