Design comparison
Solution retrospective
creo que lo mas complicado es tener el css adecuado para que JavaScript active y desactive la clase, aun siento que me quedo muy ancha la caja de las preguntas
¿esto hoy en día se hace con alguna librería de css o en la practica las paginas siguen usando este método?
Community feedback
- @MaximilianoDanielGarciaPosted 11 months ago
Hola Rodolfo, buen trabajo!
Si querés limitar el ancho del componente podés utilizar la propiedad
max-width
. Para este caso con 600px creo que quedaría bien.Para que te sea más fácil ver las dimensiones te recomiendo utilizar una extensión de navegador llamada PerfectPixel que te permite cargar la imagen del diseño y comparar superponiendola sobre tu desarrollo.
Por otro lado, te comento que HTML5 ya facilita un poco el manejo de estos acordeones con las etiquetas
<details>
y<summary>
. Mirá este ejemplo:<details open name="faq"> <summary>Element #1</summary> <p>Lorem ipsum... #1.</p> </details> <details name="faq"> <summary>Element #2</summary> <p>Lorem ipsum... #2.</p> </details> <details name="faq"> <summary>Element #3</summary> <p>Lorem ipsum... #3.</p> </details>
La etiqueta
<details>
tiene dos atributos:open
yname
.open
indica que ese elemento va a estar abierto por defecto.name
sirve como agrupador, permitiendo que cuando se abra uno se cierren los demás automágicamente.
Te dejo el link del sitio w3schools.com para más información al respecto.
Espero te ayuden estos consejos!
Marked as helpful0 - @BadGuitarist07Posted 11 months ago
Si quieres usar algún Framework, te recomendaría Bootstrap. Se hace un poco más sencillo el hacer este tipo de ejercicios.
Te dejo el enlance para que le eches una lectura rápida, es del componente 'accordion', el cual es usado para este tipo de ejemplos.
Muchos éxitos
0
Please log in to post a comment
Log in with GitHubJoin 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