FAQ Accordion Card with vanilla HTML/CSS/JS

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted about 3 years ago

  Hi! 👋

  I notice in the console that every time I want to open another accordion panel, at first the flag is false and the on the second click it gives me true and opens the accordion panel.

  I can't understand the issue. However, I suggest using the native HTML element for the accordion. By default, it's accessible by keyboard users and screen reader users. Also, it has built-in open and close functionality. So for JavaScript, all you have to do is to create a function where it only allows one accordion to be open at a time.

  I recommend using forEach instead of for loop. It's much shorter and easier to understand than the traditional for loop.

  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.

  I recommend using all classes begin with js- to select DOM elements within the JavaScript. Keep in mind, that only use the js- classes only for JavaScript purposes.

  // Example
  const form = document.querySelector(".js-form");
  

  Lastly, I notice that you use the raw.githubusercontent.com file path for the image instead of using ./images. Why do you change it to an absolute file path?

  Hope this helps.

  22

  Marked as helpful