faq-accordion-card-main

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Hi Zinah 👋,

  About the arrow, why they don't toggle up and down, I think it's because there are some little mistakes in writing the style.

  First, to make everything uniform, check at index.html file at line 27, remove the class open.

  Then, check style.css file, at line 120 and 124, remove the space between .Question and .open. Because when you separate them with a space, it means you select an element with class open inside element with class .Question. That's not exactly what we want, right?

  Finally, remove declaration display: block; at line 122, as that will make the arrow sits below the question text when the answer is opened.

  For the second issue, how to close the previous button when opening another, I have added some code to main.js file to accomodate that. This is the full code:

  const acc = document.getElementsByClassName("Question");
  const answers = document.getElementsByClassName("Answer");
  
  for (let i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "open" class,
    to highlight the button that controls the Answer */
    this.classList.toggle("open");
    
    /* Toggle between hiding and showing the active panel */
    const Answer = this.nextElementSibling;
    if (Answer.style.display === "block") {
      Answer.style.display = "none";
    } else {
      /* close all panel */
      for (let i = 0; i < answers.length; i++) {
        answers[i].style.display = 'none';
      }
      Answer.style.display = "block";
    }
    });
  }
  

  Hope this helps

  Marked as helpful

  0

  ---

  

  Zinah•420

  @Zinah-ZwayenPosted about 2 years ago

  @amalkarim Hi Amal, Thanks heaps for all that correction and explanation for each step, it's all working now.

  0