Skip to main content

FAQ Component

Features​

  • Dynamic Interaction: Allows toggling between different FAQ items.
  • Customization: Supports customization of active items based on user interaction.

Setup​

  • Component Structure: Edit FAQ.js, which contains the main logic and structure of the FAQ component.
  • State Management: Use useState to manage the active index of the FAQ items.
  • Event Handling: Implement toggleFAQ function to handle the opening and closing of FAQ items.
  • Styling: Define CSS classes for different states (active, open, etc.) to style the FAQ items accordingly.

Implementation Details​

Dynamic FAQ Items​

  • Use an array to dynamically create FAQ items, each with a unique index or identifier.

Interactive Elements​

  • The onClick event on each FAQ header toggles its open/close state.
  • Icons (plus/minus) change based on the active state of the FAQ item.

Example Usage​

<FAQ>
  {/* FAQ Item */}
  <div className={`faq-group ${activeIndex === 0 ? 'open' : ''}`}>
    <div className="faq-group-header" onClick={() => toggleFAQ(0)}>
      <h4>Question Here</h4>
      <i className={`icon ${activeIndex === 0 ? 'minus' : 'plus'}`}></i>
    </div>
    {activeIndex === 0 && (
      <div className="faq-group-body">
        <p>Answer Here</p>
      </div>
    )}
  </div>
  {/* More FAQ Items */}
</FAQ>