Design comparison
Solution retrospective
Hi all! I just completed the FAQ accordion card challenge. This challenge turned out to be arduous 😬, however I'm happy with the outcome. Pixel perfect 🤷?
I used html's details
disclosure element for this one. In the FAQ section, I set an overflow: auto
on the questions and hid the scrollbar. Do you think the scrollbar needs to be hidden? Will it occur to a user to scroll in the faq region when questions are opened. Lemme know what you guys think. Thanks 😄
EDIT: The scrollbar in the FAQ region is now visible.
Happy coding!!
Community feedback
- @arkharman12Posted about 3 years ago
Just a thought, but maybe automatically close the previous
<li>
when opening a new one. This can eliminate the need of a scrollbar. Also, make the opening and closing of list elements a bit smoother?Good job though!
1@dewslysePosted about 3 years ago@arkharman12 Thanks for your feedback. I suppose I should make the opening and closing of the elements smoother.
Concerning automatically closing previous items, don't you think a user should be able to open multiples accordion items at a time. Is that necessarily bad UI?
0@arkharman12Posted about 3 years ago@dewslyse You are right, in a bigger space I would prefer allowing the user to open all the list items at the same. But in this case, I feel like we just don't have that much space to work with so I would either put a little scroll bar to indicate there is still content underneath. Since currently it seems like that content just become invisible if all the items are open. On the other hand, I would close the previously opened item so the user can see all the content at all times (specific to this project). Happy to follow up!
1@dewslysePosted about 3 years ago@arkharman12, I get your point. The scrollbar on the accordion elements has been enabled. Later, I would rework the card to make previously opened items close automatically.
Thank you.
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