Skip to content
Submitted over 1 year ago

FAQ accordion (Tailwind CSS)

accessibility, animation, pwa, tailwind-css, lighthouse
Melvin Aguilar 🧑🏻‍💻•61,020
@MelvinAguilar
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

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. 😊✌️

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Mohammed Fakih•1,590
    @javascriptor1

    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

  • Yogi Prakoso•80
    @yogiazy

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

  • Finney•3,010
    @Finney06

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

  • P
    DalaScript•580
    @DalaScript

    Hey, Welll done!!

    May I ask you, How do you write Solution retrospective, without this 3 questions and with your own title?

    Thanks in Advance.

  • Ahmed Salem•540
    @websalem

    wow, perfect

  • Sameh•430
    @SamehCode

    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

  • Mohammed Fakih•1,590
    @javascriptor1

    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?

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