FAQ accordion (Tailwind CSS)

Community feedback

• 

  Mohammed Fakih•1,590

  @javascriptor1Posted 11 months ago

  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,140

  @MelvinAguilarPosted 11 months ago

  @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

  @yogiazyPosted 11 months ago

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

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  You're very welcome! 👍 @yogiazy

  Thank you so much for your comment !

  1
• 

  Finney•3,030

  @Finney06Posted 11 months ago

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

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  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
• 

  P

  DalaScript•530

  @DalaScriptPosted 6 months ago

  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.

  0

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 6 months ago

  @NikaDalalishvili

  Hello, the platform received an update a few months ago with those 3 questions to make it easier to help people. Before that, you only had one field where you could write whatever you wanted. This solution was uploaded before that update, which is why it doesn't have the questions.

  As a curiosity, you can decorate your texts and make them bold using markdown in the text. For example, use:

  **this is my title**

  And the result is:

  This is my title

  1

  

  P

  DalaScript•530

  @DalaScriptPosted 6 months ago

  @MelvinAguilar

  Ah, okay, I thought, it was something special. Thank u so much.

  0
• 

  Ahmed Salem•540

  @websalemPosted 11 months ago

  wow, perfect

  0
• 

  Sameh•430

  @SamehCodePosted 11 months ago

  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,140

  @MelvinAguilarPosted 11 months ago

  @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

  @SamehCodePosted 11 months ago

  @MelvinAguilar oh yea , thanks bro . good luck always

  1
• 

  Mohammed Fakih•1,590

  @javascriptor1Posted 11 months ago

  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,140

  @MelvinAguilarPosted 11 months ago

  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

  @javascriptor1Posted 11 months ago

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

  Thanks for your feedback. @MelvinAguilar

  0

  

  Dominik•90

  @ChomikensPosted 11 months ago

  @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

  @javascriptor1Posted 11 months ago

  Hi @Chomikens,

  Thanks - Appreciate your valuable feedback.

  1