Faq-Accordion

Community feedback

• 

  Shivraj K•400

  @Shivraj-K09Posted over 1 year ago

  • To fix the issue of overlapping images, you can add position: relative to the parent container of the images and position the images using top, bottom, right and left properties. Here is an example CSS code:

  .imgDiv {
    background-color: green;
    width: 50%;
    margin: 20px;
    position: relative;
  }
  
  .box {
    width: 150px;
    position: absolute;
    top: 90px; /* Position the image from top */
    right: 200px; /* Position the image from right */
  }
  
  .woman {
    width: 450px;
    position: absolute;
    bottom: 0; /* Position the image from bottom */
    left: 0; /* Position the image from left */
    transform: translate(-50%, 50%); /* Center the image horizontally and vertically */
  }
  

  • To close the already opened accordion items when another item is opened, you need an additional function. Here is the updated JavaScript code:

  const faq = document.querySelectorAll(".acc");
  faq.forEach((faqs) => {
    faqs.addEventListener("click", () => {
      const currentActive = document.querySelector(".acc.active");
      if (currentActive && currentActive !== faqs) {
        currentActive.classList.remove("active");
        currentActive.lastElementChild.style.maxHeight = 0;
      }
      faqs.classList.toggle("active");
      const accAnswer = faqs.lastElementChild;
      const height = faqs.classList.contains("active")
        ? accAnswer.scrollHeight
        : 0;
      accAnswer.style.maxHeight = `${height}px`;
    });
  });
  

  Marked as helpful

  0
• 

  Ola•520

  @Great-kiolaPosted over 1 year ago

  The accordion worked, Thanks for that but the according to the code you provided, the images are still overlapping.

  0