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 helpful
@Islandstone89
Posted
@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...
@RoksolanaVeres
Posted
@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 helpful
@Islandstone89
Posted
@RoksolanaVeres Excellent, thank you so much!
@RoksolanaVeres
Posted
@Islandstone89 you're welcome
Marked as helpful
