Skip to content
Submitted over 3 years ago

FAQ accordion card with Stylus & without JS

Maciej Poznański•210
@macpoz
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi

This is my 5th challenge here. Feel free to give feedback

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Hey there, how do you make your code line up in the design comparison? How are you estimating the sizes of the boxes in your solutions? This is nice btw!

  • Mark Mitchell•1,820
    @markup-mitchell

    I don't mean the breakpoints, I mean the width of the card when detail is opened.

    If you look at viewport width 550px with all the FAQs closed, then open one the whole card expands horizontally.

    Anyway, good luck.

  • Mark Mitchell•1,820
    @markup-mitchell

    This looks great - transitioning the height property makes the accordian open so smoothly!

    I notice that below the desktop breakpoint the width of the card increases with a jump when you open the accordian, which is a shame when you've gone to so much trouble with the height.

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