Acordeón HTML y CSS /* Estilos para el acordeón */ .accordion-item { border-bottom: 1px solid #ccc; } .accordion-title { background-color: #f4f4f4; padding: 10px; cursor: pointer; } .accordion-content { padding: 10px; display: none; } /* Estilos para mostrar el contenido al hacer clic */ .accordion-item.active .accordion-content { display: block; }

Título 1

Descripción 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus augue.

Título 2

Descripción 2: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título 3

Descripción 3: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

// JavaScript para controlar el acordeón const accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { item.addEventListener('click', () => { if (item.classList.contains('active')) { item.classList.remove('active'); } else { accordionItems.forEach(el => el.classList.remove('active')); item.classList.add('active'); } }); });