Construyendo interfaces de accordion responsivas

Introducción

En este proyecto, aprenderás a crear una simple accordion plegable utilizando HTML, CSS y JavaScript. La accordion plegable es un elemento de interfaz de usuario común que permite a los usuarios expandir y contraer secciones de contenido, lo que la convierte en una característica útil para mostrar información de manera compacta y organizada.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar la estructura HTML para la accordion plegable
• Cómo dar estilo a la accordion utilizando CSS
• Cómo agregar interactividad a la accordion utilizando JavaScript

🏆 Logros

Después de completar este proyecto, podrás:

• Crear una interfaz de accordion reactiva y visualmente atractiva
• Utilizar JavaScript para agregar interactividad y comportamiento dinámico a los elementos web
• Integrar HTML, CSS y JavaScript para construir un componente web funcional y amigable para el usuario

Configurar la estructura del proyecto

En este paso, configurarás el proyecto abriendo los archivos proporcionados en el editor.

1. Abre el editor y deberías ver los siguientes archivos: index.html, style.css, index.js y jquery-3.6.0.min.js.
2. Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.
3. Abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página. Haciendo clic en una imagen en una página que está contraída no la expandirá. Puedes verlo como se muestra a continuación:

Agregar interactividad con jQuery

En este paso, agregará interactividad a la accordion utilizando jQuery.

1. Abra el archivo index.js en su editor.
2. Agregue el siguiente código:

$(".option").click(function () {
  $(".option").removeClass("active");
  $(this).addClass("active");
});

Este código agrega un controlador de eventos de clic a cada elemento .option. Cuando se hace clic en un .option, el código quita la clase active de todos los elementos .option y agrega la clase active al elemento .option en el que se hizo clic. Esto expandirá o contraerá la accordion según sea necesario.

3. Guarde el archivo index.js.
4. Actualice el navegador para ver el resultado final.
5. Haga clic en las diferentes opciones de la accordion para verlas expandirse y contraerse.

El efecto se ve así:

¡Felicitaciones! Has completado el proyecto de la accordion plegable.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.