Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-first FAQ accordion

Ify Nonyelu• 260

@Yetco

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

FAQ accordion
  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

I found it difficult to add the transition and ease in when you click on a question. I couldn't figure it out.

Community feedback

Weston Vincze• 30

@WestonVincze

Posted

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

@Yetco

Posted

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

1
Weston Vincze• 30

@WestonVincze

Posted

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

@Yetco

Posted

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

@WestonVincze

Posted

@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

@Yetco

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord