FAQ Accordion Card

Hi, Dan 👋

Personally, I will recommend using jQuery instead of vanilla JavaScript as it is generally easier to use. But for now, let's tweak existing JavaScript a little bit so it will work according to your favor.

These are a little explanation about the code:

• Instead of using var for the variable, let's use const for variables that are immutable, and let for the mutable variables
• display property cannot be animated using CSS. We better use opacity to make the transition works both when the element shows and hides. In style.css, let's change display: none; to opacity: 0; for panel class.
• We have a few things to consider, active class for <div class="accordion">, maxHeight and opacity properties for <div class="panel">.

const acc = document.getElementsByClassName("accordion");
 const panels = document.getElementsByClassName("panel");

 for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    const panel = this.nextElementSibling;

    if (panel.style.opacity == 1) {
      this.classList.remove("active");
      panel.style.opacity = 0;
      panel.style.maxHeight = 0;
    
    } else {
      for (let j = 0; j < panels.length; j++) {
        acc[j].classList.remove("active");
        panels[j].style.opacity = 0;
        panels[j].style.maxHeight = 0;
      }

      this.classList.add("active");
      panel.style.opacity = 1;
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
 }

For positioning the cube image, first you have to give the parent element this: position: relative;, in this case it's <div class="main-left">. After that, you can place cube image anywhere inside it, and give it position: absolute; and other necessary positioning declarations.

Hope this helps