En el ejemplo muestro un componente de acordeón utilizando HTML, CSS y JavaScript.
El acordeón tiene tres secciones. Cada sección tiene un título que se puede hacer clic para mostrar u ocultar el contenido correspondiente.
El código del ejemplo es el siguiente
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
/* Estilos del acordeón */
.accordion {
max-width: 400px;
margin: 0 auto;
}
.accordion-item {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.accordion-title {
padding: 10px;
background-color: #f4f4f4;
color: #333;
font-weight: bold;
cursor: pointer;
}
.accordion-content {
padding: 10px;
background-color: #fff;
display: none;
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">Título DevCodeLight 1</div>
<div class="accordion-content">Contenido del acordeón 1</div>
</div>
<div class="accordion-item">
<div class="accordion-title">Título DevCodeLight 2</div>
<div class="accordion-content">Contenido del acordeón 2</div>
</div>
<div class="accordion-item">
<div class="accordion-title">Título DevCodeLight 3</div>
<div class="accordion-content">Contenido del acordeón 3</div>
</div>
</div>
<script>
// Obtener todos los elementos del acordeón
var accordionItems = document.querySelectorAll('.accordion-item');
// Agregar evento de clic a cada título del acordeón
accordionItems.forEach(function(item) {
var title = item.querySelector('.accordion-title');
var content = item.querySelector('.accordion-content');
title.addEventListener('click', function() {
// Toggle para mostrar/ocultar el contenido
content.style.display = content.style.display === 'block' ? 'none' : 'block';
// Cambiar el estilo del título al abrir/cerrar el acordeón
title.classList.toggle('active');
});
});
</script>
</body>
</html>
Por último, muestro el resultado.
