Scss used, flexbox and js for the accordion

Community feedback

• 

  tediko•6,700

  @tediko

  Posted over 4 years ago

  Hi, Noxde! Well done!

  I finished this challenge recently so i can suggest you some changes and fixes.

  • You repeat <button class="dropdown-arrow"> element with arrow image a lot in your HTML code, but this is unnecessary. Instead use pseudo element ::before on <div class="question"> element. Set the .question element as position: relative and the pseudo element as position: absolute. Insert image using the content: url(image.jpg).
  • In javascript, instead of adding event listeners to the .question class and the .dropdown-arrow button you can select faq__question and add one event listener to this. You will save unnecessary code repetition as well as low readability. You will also gain that the whole height of the question will be clickable, not just the height of the text.

  Good luck with that, have fun!

  11
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Hey, Noxde! 👋

  Great to see you complete another challenge! You did a nice job on this one! 👍

  I suggest,

  • Taking a look at the paragraph text of the first FAQ. There seems to be a typo there that says, "aria-label="dropdown".
  • Breaking into a mobile-friendly layout a little sooner than 720px so that the text content of the FAQs (both the titles and descriptions) don't look to squished right before the layout changes.

  Keep coding (and happy coding, too)! 😁

  00