Design comparison
Solution retrospective
I managed to do some JavaScript functionality all by myself.
What challenges did you encounter, and how did you overcome them?The JS parts were a bit tricky. I didn't figure out how to make a question collapse when another is clicked. And for some reason, the card gets a little bit wider when clicked.
Community feedback
- @matbac85Posted 8 months ago
Hello,
I think your card gets bigger because its width is influenced by the text's width that appears after the click.
I don't understand what you mean about the collapsing part. Do you mean to have only one question answered at a time ? If so, you can just use a condition.
Marked as helpful0@Islandstone89Posted 8 months ago@matbac85 Hi.
Adding
max-width: 60ch
solved the issue - thanks for the tip!Yes, I mean having only one answer at a time. Not sure how complicated that would be...
0@RoksolanaVeresPosted 7 months ago@Islandstone89 Hi again! I got also curious about this one and came up with the following solution to let only one item open at a time:
function toggleDisclosure() { if (this.getAttribute("aria-expanded") === "true") { disclosureButtons.forEach((button) => button.setAttribute("aria-expanded", "false")); } else { disclosureButtons.forEach((button) => button.setAttribute("aria-expanded", "false")); this.setAttribute("aria-expanded", "true"); } }
Marked as helpful1@Islandstone89Posted 7 months ago@RoksolanaVeres Excellent, thank you so much!
1
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