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

Responsive FAQ accordion card with tailwindcss and alpine.js

Ian 150

@blndcat

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


For this challenge I used tailwindcss and alpine.js as I was learning these at the time and needed a real-world example to work with. I was pleasantly surprised at how easy to use alpine.js and would recommend it if you are adding some js enhancement to static html pages, that is if the project isn't already using a framework like react.

Community feedback

Hyron 5,870

@hyrongennike

Posted

Hi @blndcat,

Nice job on challenge

Just a design suggestion, instead of increasing the font size when a faq is active keep the font size the same and just make it bold. You can also animate the height of the answer instead of the h3 that it slide open rather that just appearing, you would need to remove the display: none and use the following.

.faq_item>.answer {
    transition-duration: .5s;
    max-height: 0;
    overflow: hidden;
}

.faq_item-active>.answer {
    max-height: 50px;
    overflow: visible;
}

You can also before adding the .faq-active class to the one being clicked on loop over all of them and remove the .faq-active that way only one will be open at a time.

Hope this is helpful.

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