Ejercicio de accordion en HTML y CSS para curso online

Ejercicio de programación: Reto accordion

Este ejercicio de programación está diseñado para poner a prueba tus conocimientos en Bootstrap. Es un ejercicio de nivel intermedio que requiere conocimientos sólidos de la tecnología.

Tipo: Ejercicio de código 5 minutos estimados 200 puntos de experiencia

Información adicional del ejercicio

Crear un accordion básico con tres secciones utilizando las clases y estructura oficial de Bootstrap 5.3

Contenido del ejercicio

Crea un accordion completo con tres secciones sobre información de un curso online. El accordion debe tener el id cursoAccordion y contener las siguientes secciones:

Primera sección (abierta por defecto):

Título: "Contenido del curso"
Contenido: "Este curso incluye 12 módulos teóricos y 8 ejercicios prácticos para dominar los fundamentos del desarrollo web."
ID del collapse: contenido

Segunda sección (cerrada por defecto):

Título: "Requisitos previos"
Contenido: "No se requieren conocimientos previos. Solo necesitas un ordenador con conexión a internet y ganas de aprender."
ID del collapse: requisitos

Tercera sección (cerrada por defecto):

Título: "Certificación"
Contenido: "Al completar el curso recibirás un certificado digital que podrás añadir a tu perfil profesional de LinkedIn."
ID del collapse: certificacion

Recuerda utilizar:

La clase .accordion para el contenedor principal
La clase .accordion-item para cada sección
La clase .accordion-header para las cabeceras
La clase .accordion-button para los botones
La clase .accordion-collapse collapse para los contenidos colapsables
La clase .accordion-body para el contenido interno
El atributo data-bs-parent para el comportamiento de grupo exclusivo
Los atributos data-bs-toggle="collapse" y data-bs-target correspondientes
Los atributos aria-expanded apropiados (true para la primera sección, false para las demás)
La clase .show solo en la primera sección para que aparezca abierta
La clase .collapsed en los botones de las secciones cerradas

Lección relacionada

Este ejercicio está relacionado con la lección "Collapse y Accordion" de Bootstrap. Te recomendamos revisar la lección antes de comenzar.

Ver lección relacionada

Más ejercicios de Bootstrap

Explora más ejercicios de programación en Bootstrap para mejorar tus habilidades y obtener tu certificación.

Ver más ejercicios de Bootstrap

Solución al ejercicio de programación en Bootstrap

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en Bootstrap para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en Bootstrap

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a programar

Únete a miles de desarrolladores mejorando sus habilidades en Bootstrap

⭐⭐⭐⭐⭐

4.9/5 valoración