Cómo expandir y contraer un Div en JavaScript

Escrito por kevin lee
  • Comparte
  • Twittea
  • Comparte
  • E-mail

Los divs te permiten agrupar elementos en una página web. Hay dos maneras de hacer desaparecer los divs en una página. Primero, puedes crear un código que haga que tu div sea un elemento invisible, o puedes hacerlo colapsar. Si simplemente lo haces invisible, donde existía el div dejarías un espacio vacío. Colapsar un dix remueve ese espacio vacío sin dejar ningún tipo de agujero en tu página web. Usando JavaScript vinculado a un botón, puedes crear tus propios divs que colapsan y se expanden cuando los usuarios les hacen clic al botón.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

    Agrega un Div a una página web

  1. 1

    Inicia el Bloc de Notas y abre cualquiera de tus documentos HTML.

  2. 2

    Agrega este bloque de código HTML a la sección "body" (cuerpo) de tu documento: Div text . Este código creará un div y un botón. El div contiene un párrafo con un texto que dice: "Div text" (texto div). Reemplaza el texto con lo que quieras. El "botón" llamará a una función JavaScript cuando se le haga clic. Esa función causará que el div cambie de su estado colapsado al un estado expandido.

  3. 3

    Localiza las propiedades "id" y "class" en la etiqueta "div". Para crear un div que se colapse y se expanda, debes darle al div un valor id. En este ejemplo, ese valor es "MyDiv". El div también tiene una propiedad de clase. En este paso, el valor de esa propiedad es "divVisible". Ese es el nombre de una clase CSS definida en la próxima sección.

    Agrega las clases CSS y JavaScript

  1. 1

    Agrega el siguiente código CSS a la sección "head" (encabezado) de tu documento: . Esto creará una clase "divVisible" y otra clase llamada "divHidden". La primera pone el indicador de valor en "block". El valor "block" hace que cualquier elemento HTML que hace referencia a la clase sea visible y se expanda para ocupar espacio en la página web. La clase "divHidden" pone su indicador de valor en "none". Cualquier HTML que haga referencia a esa clase colapsará y no dejará ningún espacio vacío en su lugar.

  2. 2

    Agrega este código JavaScript debajo del código CSS: . La variable divID tiene el valor de ID del div que quieres colapsar y expandir. Ese valor es "MyDiv". El resto del código obtiene el nombre de clase CSS actual y lo cambia cada vez que se corre ese código. La primera vez que se ejecute ese código, el nombre de clase de div cambiará a "divHidden". La segunda vez que lo corras, cambiará el nombre de clase de nuevo a "divVisible".

  3. 3

    Guarda el documento HTML y ábrelo en tu buscador de internet. El párrafo que contiene tus cambios aparecerá.

  4. 4

    Haz clic en el botón "Colapsar/Expandir". El texto colapsará. Haz clic en el botón otra vez para expandirlo. Nota cómo el botón y otros elementos debajo del texto se mueven hacia arriba cuando el texto colapsa y hacia abajo cuando se expande.

Consejos y advertencias

  • En este ejemplo, el valor de div es "MyDiv". Cambia el valor por algo que sea más importante para ti. Si lo haces, localiza la variable "divID" en el código JavaScript y cambia su valor de "MyDiv" por tu nuevo valor también.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles