FAQ Accordion Card with vanilla HTML/CSS/JS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 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.

  Marked as helpful

  2

  ---

  

  whitehatns•150

  @platypus567Posted over 2 years ago

  @vanzasetia I use the absolute file path because on github pages the images weren't showing without it. On my local machine, I use the ./images. Thank you for the advice!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @platypus567 It should be possible to use ./images on GitHub pages. If you try to copy-paste the below code and update the site, the images should be showing up.

  <img
    src="./images/illustration-woman-online-mobile.svg"
    alt=""
    id="headimg"
  />
  <img src="./images/bg-pattern-desktop.svg" alt="" id="bgdesktop">
  <img src="./images/bg-pattern-mobile.svg" alt="" id="bgmobile">
  

  I know that you've tried to use ./images before by reading through the commit history. However, just to let you know that it is possible to use a relative file path on GitHub pages.

  2