frequently asked questions accordion

Community feedback

• 

  MaximilianoDanielGarcia•1,980

  @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 y name.

  • 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 helpful

  0
• 

  Ricardo Vargas•80

  @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

  Bootstrap Accordion

  0