FAQ Accordion Challenge using SASS, Vanilla JS and Flexbox

Community feedback

• 

  tediko•6,700

  @tediko

  Posted about 4 years ago

  Hello, Rizwan Mustafa! 👋

  This is a really good solution. Well done! I like that your FAQ's hide when you open next one. Few tips from me:

  • Try not to repeat your HTML code with image for each arrow. Easier way around is to use pseudo element ::before on your .card element. Set it to position: relative and your pseudo element as position: absolute. Put your image using content: url('image.jpg').
  • The HTML <hr> element represents a thematic break between paragraph-level elements i think there is better approach to this line effect. Border on .card or maybe some pseudo element?

  Have fun coding! 💪

  11