FAQ Accordion Card

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  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

  0