Design comparison
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
- @WestonVinczePosted 12 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 helpful1@YetcoPosted 12 months agoThank you for your help, I really appreciate it @WestonVincze .
1 - @WestonVinczePosted 12 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 itsscrollHeight
.// 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 helpful0@YetcoPosted 12 months agoThank 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@WestonVinczePosted 12 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 helpful0@YetcoPosted 12 months agoSorry 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 GitHubJoin 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