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

FAQ accordion card with html & sass

dewslyse 3,025

@dewslyse

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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

@arkharman12

Posted

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

dewslyse 3,025

@dewslyse

Posted

@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

@arkharman12

Posted

@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
dewslyse 3,025

@dewslyse

Posted

@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 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