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
Log in with GitHub

Submitted

FAQ accordion (Tailwind CSS)

#accessibility#animation#pwa#tailwind-css#lighthouse
Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Preview siteView code
Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

FAQ accordion
  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi there 👋, I’m Melvin, and this is my solution for this challenge. 🚀

🎁 Features:

  • Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
  • Progressive Web App (PWA) support. 📱🌐
  • Utilized TailwindCSS for responsive styling. 🎨
  • Codebase is well-maintained and formatted using Prettier. 💻
  • Resemblance with the original design. 🎨
  • No media queries were used. 📱
  • Integrated very small animation. ✨

💻 Two Solutions in Two Branches:

🛠️ Built With:

  • TailwindCSS. 🎨
  • npm - prettier - prettier-plugin-tailwindcss. 💻

Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

Thank you. 😊✌️

Community feedback

Mohammed Fakih• 1,590

@javascriptor1

Posted

Hi Melvin,

Excellent solution as always. Your native solution draws my attention to the fact that CSS selectors like:

:is and :not can work as if condition combined with HTML attributes which makes it possible to get rid of JS code when you have two options to choose from.

Thanks for your excellent contribution to FEM. I enjoy looking at your code always.

Regards, MKF

1
Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted

@javascriptor1 Thank you so much for your kind words! 🌟 I'm glad you found the solution helpful. Your support means a lot! 🙌

3
Yogi Prakoso• 80

@yogiazy

Posted

Thanks! 👋 I've learned new features from your solution.

1
Finney• 3,030

@Finney06

Posted

Isn't the button meant to close when another button is been click...?

1
Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted

Hi @Finney06

I think it depends on the designer. There are different types, like Multiselectable, which allow you to display multiple contents at once, and the ones you mentioned, which only allow showing one.

The challenge requirements don't mention it specifically, and the one it's mostly based on, in terms of behavior, is the one I've seen the most. Even Frontend Mentor has it in their "Challenge FAQs" section or on any challenge page. At the bottom, there's an accordion with this behavior. 🎨✨

Happy coding

1
Ahmed Salem• 540

@websalem

Posted

wow, perfect

0
Sameh• 430

@SamehCode

Posted

what about the main idea of accordion ? when select a topic the rest of topics must be not visible

https://getbootstrap.com/docs/5.3/components/accordion/

search for accordion to get the main idea

i've added link for you from bootstrap accordion check it out

0
Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted

@SamehCode

Hi!! Thanks for the comment.

There are various types; mine is multiselectable. It depends on the context and what the user needs. The challenge doesn't specify the type, and I suppose it's better to have all the information.

In the link you provided from Bootstrap, there's even an example of this type, found in the "Always open" section. It mentions, "Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened " . That is exactly the behavior I use in this challenge.

https://getbootstrap.com/docs/5.3/components/accordion/#always-open

Happy coding

2
Sameh• 430

@SamehCode

Posted

@MelvinAguilar oh yea , thanks bro . good luck always

1
Mohammed Fakih• 1,590

@javascriptor1

Posted

I also forgot to mention I could not see the thin line in your solution between questions.

I wonder how do you solve this usually? do you use <hr> tag? or border-bottom? Or other approaches?

0
Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted

Hi @javascriptor1. Is there a dividing line? I didn't notice when doing the challenge, it seems I have trouble seeing faint colors haha, but I might have used a border-bottom. 🤔😅

Thanks for pointing out my mistake!

2
Mohammed Fakih• 1,590

@javascriptor1

Posted

Never mind - I always face same problem with very light colors when doing challenges.

Thanks for your feedback. @MelvinAguilar

0
Dominik• 90

@Chomikens

Posted

@javascriptor1 you can create border bottom this is simple way.

Or another approach use ::after and them owl selector: * + * to add fancy margin to be more consistant.

In short words it will ad margin ro all elements that have previous sibling.

You can read about ot herehttps://alistapart.com/article/axiomatic-css-and-lobotomized-owls/

2
Mohammed Fakih• 1,590

@javascriptor1

Posted

Hi @Chomikens,

Thanks - Appreciate your valuable feedback.

1

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