FAQ accordion with HTML, CSS, Javascript

Community feedback

• 

  beniusis•400

  @beniusisPosted 10 months ago

  Hey 👋 Congratulations on completing the challenge!

  The text overflows because you have set the card's height as 34rem. To fix that, you can set height: fit-content.

  1
• 

  Ben•20

  @GudelisPosted 10 months ago

  Hi,

  Just did this project also, you can check my solution to have one question open at a time. https://www.frontendmentor.io/solutions/faq-accordion-psETbWsVvf

  Shortly, I created function to check if clicked question is equal to already opened question, if not it, hides it and shows new one.

  0
• 

  Maria Valentinova Ivanova•220

  @MariaValentinovaPosted 10 months ago

  Hi, there! I personally took advantage of all the default functionalities of Bootstrap to create the accordion and control its behavior. You can look at my code in case it is helpful to you. You can achieve closing the previously opened item when opening a new one by keeping track of the currently opened item and closing it before opening the new one. Here are some suggestions to implement this in your code: 1.Create a global variable to track the currently opened item. You can initialize it with null initially since no item is open at the beginning. Like: let currentItem = null; 2.Modify the showhide and hideshow functions: When opening an item, check if there is currently an open item (currentItem is not null). If there is one, close it before opening the new item. When closing an item, update the currentItem variable to null.

  0