Mobile-first FAQ accordion

Community feedback

• 

  Weston Vincze•30

  @WestonVincze

  Posted over 1 year 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.

  11

  Marked as helpful
• 

  Weston Vincze•30

  @WestonVincze

  Posted over 1 year 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.

  03

  Marked as helpful