Divs le permite agrupar elementos en una página web. Hay dos formas de hacer que los divs en una página web desaparezcan. Primero, un código convierte un div en un elemento invisible, o puede usar colapso. Si simplemente haces invisible un div, queda un espacio vacío donde existe el div. Al colapsar un div se elimina ese espacio vacío sin dejar ningún "agujero" en su página web. Usando JavaScript vinculado a un botón, puede crear sus propios divs que colapsan y se expanden cuando los usuarios hacen clic en el botón.
Agregar div a la página web
Paso 1
Inicie el Bloc de notas y abra cualquiera de sus documentos HTML.
Paso 2
Agregue este bloque de código HTML a la sección "cuerpo" del documento:
Texto div.
Este código crea un div y un botón. El div contiene un párrafo con texto que dice: "Texto div". Reemplace ese texto con lo que quiera. El "botón" llama a una función de JavaScript cuando se hace clic. Esa función hace que el div cambie entre un estado colapsado y un estado expandido.
Localice las propiedades "id" y "class" en la etiqueta div. Para crear un div en expansión y colapso, debe darle al div un valor de identificación. En este ejemplo, ese valor es "MyDiv". El div también tiene una propiedad de clase. En este caso, el valor de esa propiedad es "divVisible". Ese es el nombre de una clase CSS definida en la siguiente sección.
Agregue clases CSS y JavaScript
Paso 1
Agregue el siguiente código CSS a la sección "encabezado" del documento: Esto crea la clase "divVisible" y otra clase llamada "divHidden". La clase "divVisible" establece su valor de visualización en "bloque". El valor de "bloque" hace que cualquier elemento HTML que hace referencia a la clase sea visible y lo expande para ocupar espacio en la página web. La clase "divHidden" establece su valor de visualización en "ninguno". Cualquier elemento HTML que haga referencia a esa clase se contrae y no deja espacio atrás.
Paso 2
Agregue este código JavaScript debajo del código CSS: La variable divID contiene el valor de identificación del div que desea contraer y expandir. Ese valor es "MyDiv". El resto del código obtiene el nombre de clase CSS actual del div y lo cambia cada vez que se ejecuta el código. La primera vez que se ejecuta el código, cambia el nombre de clase del div a "divHidden". La segunda vez que se ejecuta, cambia el nombre de la clase nuevamente a "divVisible".
Paso 3
Guarde el documento HTML y ábralo en su navegador. Aparece el párrafo que contiene su párrafo.
Haga clic en el botón "Contraer /Expandir". El texto se derrumba. Haga clic nuevamente en el botón para expandir el texto. Observe cómo el botón y otros elementos debajo del texto se mueven hacia arriba cuando el texto colapsa y hacia abajo cuando el texto se expande.
[Cómo expandir y contraer un DIV en JavaScript] URL: http://www.ordenador.online/computadora/Internet/245723.html