Mobile-first FAQ accordion

Community feedback

• 

  Weston Vincze•30

  @WestonVinczePosted 11 months ago

  No worries! Happy to help. I took a look at the code and found the issue.

  This is the culprit.

  const questionHideContent = question.querySelector(".hide");

  The issue here is that querySelector only checks child nodes and .hide is actually a sibling.

  To solve this, all we have to do is change the above line to:

  const questionHideContent = question.parentNode.querySelector(".hide");

  As a side note, your solution no longer requires the active class, since it was previously used to determine whether or not .hide should be hidden or not.

  Marked as helpful

  1

  ---

  

  Ify Nonyelu•260

  @YetcoPosted 11 months ago

  Thank you for your help, I really appreciate it @WestonVincze .

  1
• 

  Weston Vincze•30

  @WestonVinczePosted 11 months ago

  Adding transitions for an accordion is a bit tricky. In order for the text content to slide in and out you'll want to animate the max-height of the element.

  First, add this to your .hide class:

  .hide {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }
  

  Next, remove display: none from your hide class as well, otherwise the content will be instantly hidden without any animation.

  The last part is where it gets a little tricky... we need to set a max-height for the content while the parent is active. An easy way to do this is to simply set the max-height to be higher than any of the content (something like 500px):

  .active .hide {
    max-height: 500px;
  }
  

  However, you may notice that an odd delay occurs. That's because the animation goes from 0px to 500px and vice versa regardless of the actual height of the content. Basically, if your content is 300px high, the animation will act as if it was 500px.

  The better solution is to use JS to dynamically assign the max-height based on the content of each .hide by using its scrollHeight.

  // check if the parent is active
  const isActive = answer.parentNode.classList.contains("active");
  
  // if it is active, set the max height to the height of its scrollable content
  answer.style.maxHeight = isActive ? `${answer.scrollHeight}px` : 0;
  

  Note: answer represents a single instance of a .hide element. You'll have to iterate through answers just like you did for questions.

  Hopefully that helps! Let me know if you have any questions about my explanation.

  Marked as helpful

  0

  ---

  

  Ify Nonyelu•260

  @YetcoPosted 11 months ago

  Thank you for your feedback @WestonVincze . I think I figured it out, but it still looks like there is a delay when it closes. Does this code look right to you, If you don't mind me asking?

  questions.forEach((q) => { const qHideContent = q.querySelector(".hide");

    if (q.parentNode.classList.contains("active")) {
      qHideContent.style.maxHeight = qHideContent.scrollHeight + "px";
    } else {
      qHideContent.style.maxHeight = 0;
    }
  });
  

  0

  

  Weston Vincze•30

  @WestonVinczePosted 11 months ago

  @Yetco

  The code is mostly correct, but it seems like you run that loop only once when the app starts (if that assumption is wrong, please let me know). What you want to do is modify your original loop where you add an event listener to each question.

  Whenever a question is clicked we need to determine whether the maxHeight should be 0 or its scrollHeight based on the current active state.

  Also, because you're implementing a JavaScript solution, you no longer need this CSS:

  .active .hide {
    max-height: 500px;
  }
  

  Let me know if that helps!

  If I'm wrong about my assumptions I may need a bit more context. You can push your latest code and message me and I'll take another look.

  (spoiler below, don't look if you want to try and solve this on your own)

  .

  .

  .

  This is how you can modify your original script:

      (...)
      // Check the current state based on a data attribute
      const isExpanded = question.getAttribute("data-expanded") === "true";
  
      const qHideContent = question.querySelector(".hide");
  
      if (isExpanded) {
          qHideContent.style.maxHeight = qHideContent.scrollHeight + "px";
        } else {
          qHideContent.style.maxHeight = 0;
        }
  

  Marked as helpful

  0

  

  Ify Nonyelu•260

  @YetcoPosted 11 months ago

  Sorry to keep bothering you, but I am trying to figure this out @WestonVincze . I'm following your advice, but it doesn't seem to be working. This is my whole JavaScript code

  const questions = document.querySelectorAll(".question");

  questions.forEach((question) => { question.addEventListener("click", () => { const plusLogo = question.querySelector(".plus-logo"); // const hideContent = question.querySelector(".hide");

  // Check the current state based on a data attribute
  const isExpanded = question.getAttribute("data-expanded") === "true";
  
  const questionHideContent = question.querySelector(".hide");
  
  if (isExpanded) {
    questionHideContent.style.maxHeight =
      questionHideContent.scrollHeight + "px";
  } else {
    questionHideContent.style.maxHeight = 0;
  }
  
  // Toggle the state
  question.setAttribute("data-expanded", (!isExpanded).toString());
  
  // Change the image source based on the state
  plusLogo.src = isExpanded
    ? "assets/images/icon-plus.svg"
    : "assets/images/icon-minus.svg";
  
  // Toggle the "active" class
  question.parentNode.classList.toggle("active");
  

  0