FAQ accordion - Flexbox / JS DOM

Community feedback

• 

  EduardoSaavedraQ•50

  @EduardoSaavedraQPosted 11 months ago

  Hi, @aazs-edu

  The results of your project are amazing.

  However, I have a few suggestions for you:

  • I saw you wrapped the questions and the answers with a div container and you used JavaScript to hide and show them. It works fine, but there is another way that will save you a lot of time and work.

  HTML has these two tags for that porpuse: <details> and <summary>.

  <details>
      <summary>Your question?</summary>
      <p>Your answer.</p>
  </details>
  

  By default, browsers will show a '►' when the answer is hidden, and a '▼' when it is shown. You can delete or modify these markers with CSS:

  details summary::marker {
      content: ''; /*If you want to remove the marker*/
      content: '☼'; /*If you want to change the marker*/
  }
  

  • Another advantage of using the details tag is that you can configure it to automatically hide an aswer when another one is shown by adding de name attribute with the same value in all the details tags like this:

  <details name="info">
      <summary>A question?</summary>
      <p>An answer.</p>
  </details>
  <details name='info'>
      <summary>Another question?</summary>
      <p>Another answer.</p>
  </details>
  

  However, right now these feature is not available in all browsers, so, for the moment, you might wanna use JavaScript instead.

  • Always follow a hierarchy for headings. You are skipping h2 tags and using h3 tags. If you need to make headings smaller, you better use CSS for that.

  • I saw in your CSS file that you are using absolute units for font sizes. To improve the accesibility, I recommend you to use rem units instead of pixels. The default value of 1rem is 16px. So, if you wanna convert pixels to rem, you must follow this formula: Xpx/16. It's possible to set the value of 1rem by addign the next CSS code:

  :root {
      font-size: 10px; /*Now 1rem is equal to 10px*/
  }
  

  But this is not recommended.

  • Make a README file. It's always important to document your projects. No matter how small or big they are. I understand this part isn't much fun, but it will help other developers to know your project better.

  I hope these advices work for you Happy coding!

  Marked as helpful

  1