FAQs accordion Made with HTML, CSS and JS

Solution retrospective
Frontend Mentor - FAQ accordion solution
Esta es mi solución al desafío FAQ accordion solution de Frontend Mentor. Los desafíos de Frontend Mentor te ayudan a mejorar tus habilidades de codificación mediante la construcción de proyectos realistas.
📖 DESCRIPCION GENERAL
EL DESAFIO
Los usuarios deben poder:
-
Ver el diseño óptimo según el tamaño de pantalla de su dispositivo.
-
Ver los diseños flex-box y su estructura.
-
Ver cada pregunta frecuente.
-
Ver un acordion a la vez.
-
Hacer clic en una pregunta para ocultar o mostrar la respuesta.
LINKS
- Solution URL: Solucion
- Live Site URL: Sitio en Vivo
🛠️ MI PROCESO TECNOLOGIAS UTILIZADAS
-
HTML: Estructura semántica de todo el acordion.
-
CSS: Estilos avanzados con flex-box.
-
JavaScript: Funcionalidad para cada pregunta frecuente.
-
Google Fonts: Fuente Work Sans para un diseño moderno.
LO QUE APRENDI
-
Manejo de DOM: Aprendí a manejar el DOM de forma efectiva para crear una experiencia de usuario interactiva.
-
Mostrar preguntas: Aprendí a mostrar y ocultar preguntas frecuentes utilizando JavaScript.
const accordionHeaders = document.querySelectorAll(".accordion__header"); const panels = document.querySelectorAll(".panel"); // Inicializar el primer panel como abierto panels[0].style.maxHeight = panels[0].scrollHeight + "px"; accordionHeaders[0].querySelector(".plus").style.display = "none"; accordionHeaders[0].querySelector(".minus").style.display = "block"; accordionHeaders.forEach((header, index) => { header.addEventListener("click", () => { const panel = panels[index]; const plusIcon = header.querySelector(".plus"); const minusIcon = header.querySelector(".minus"); // Alternar el panel if (panel.style.maxHeight) { panel.style.maxHeight = null; plusIcon.style.display = "block"; minusIcon.style.display = "none"; } else { panel.style.maxHeight = panel.scrollHeight + "px"; plusIcon.style.display = "none"; minusIcon.style.display = "block"; } // Cerrar otros paneles panels.forEach((otherPanel, otherIndex) => { if (otherIndex !== index) { otherPanel.style.maxHeight = null; accordionHeaders[otherIndex].querySelector(".plus").style.display = "block"; accordionHeaders[otherIndex].querySelector(".minus").style.display = "none"; } }); }); });
👨💻 AUTOR
- GitHub - ImBenja
- Frontend Mentor - @ImBenja
- Instagram - @benjajuarez1_
- Twitter - @benjajuarez_2
- Linkedin - Benjamim Juarez
🙏 AGREDECIMIENTOS
Agradezco a Frontend Mentor por proporcionar este desafío y a la comunidad por su apoyo y feedback.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Benjamin Juarez's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord