This is fully responsive FAQ Accordion Card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Tuason! 👋

  Congratulations on completing this challenge! 🎉 It's great that you manage to finish this challenge without watching tutorials! 👏

  Some recommendations to improve this solution.

  • I would highly suggest using the native HTML elements for the accordion, details and summary tags. By default, they are accessible by keyboards and screen readers. Also, they have the open and close functionality by default.
  • If you plan to use the native HTML elements to create the accordion, then you will write less JavaScript. All you have to do is to have the functionality where only one accordion panel should be opened at a time. I suggest toggling the open attribute.
  • After looking at your JavaScript, here are some suggestions from me.
    • Avoid using JavaScript to add styling (unless you've no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.
    • It's best to add a click events to only interactive elements. So, if you plan to not use the native HTML elements then I recommend using button element instead. Also, search on the internet on "how to create an accessible accordion".
  • I notice some Lorem Ipsum for the page content. I recommend using the text content that has been provided.
  • Avoid using !important. If you find yourself using it, it might be a sign that there's something wrong with the code. In rare circumstances, there are "valid" use cases for !important.

  I hope this helps! Keep going and happy coding! 👍

  Marked as helpful

  1

  ---

  

  Jeffrey Tuason•550

  @Tuason066Posted over 2 years ago

  Hello Setia,

  I was overwhelmed by your feedback and this is very helpful to me and to my future projects. Thank you for pointing out the things that I need to improve on. So yes, I will study the native HTML and include it in my following projects for accessibility. Also thank you for the javascript suggestion and I will take it in mind.

  So, I want to explain why I used !important frequently, it is because bootstrap uses !important frequently for their styles and to overwrite those styles of bootstrap I need to include the !important on my written styles.

  I hope we get along to each other in the future. I followed you Thank you so much.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Tuason066 Don't worry! I suggest implementing my feedback slowly. Take it to step by step.

  Well, if that's the case, I guess it's okay to use !important.

  Anyway, I suggest removing the #semantic-ui and #webflow tags since the site is not built with those tools.

  0

  

  Jeffrey Tuason•550

  @Tuason066Posted over 2 years ago

  Hi @vanzasetia,

  Can you please help me out with my solution here's the link: https://www.frontendmentor.io/solutions/responsive-time-tracking-dashboard-xK6fo7Ph51

  Thank you so much.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Tuason066 I would love to help you but, I haven't done the challenge. So, I am afraid I might not be able to answer your question.

  Also, my JavaScript is still bad (based on the question you've asked the community). So, I can't give any answer. Sorry for that. 😅

  0

  

  Jeffrey Tuason•550

  @Tuason066Posted over 2 years ago

  @vanzasetia By the way I already find the solution of my question. Thank you so much for trying to help me.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Tuason066 Good to know! 👍

  0