WidgetFaq2

An accordion-style FAQ widget with expandable/collapsible items. Each item can be clicked to reveal or hide its content.

---
import { WidgetFaq2 } from '@yatoday/astro-ui/astro';
---

<WidgetFaq2
  title="Frequently Asked Questions"
  subtitle="Here we have collected answers to the most popular questions about our service."
  classes={{ container: 'max-w-6xl' }}
  items={[
    {
      title: 'What is included in the service?',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    },
    {
      title: 'How do I get started?',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
    },
    {
      title: 'What payment methods do you accept?',
      description:
        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    },
    {
      title: 'How long does delivery take?',
      description:
        'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    },
  ]}
/>

Open All Items

Use openAllItems prop to have all accordion items expanded by default.

<WidgetFaq2
  title="All Items Open"
  openAllItems={true}
  items={[
    {
      title: 'Question 1',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    },
    {
      title: 'Question 2',
      description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.',
    },
  ]}
/>

First Item Closed

Set openFirstItem to false to have all items collapsed initially.

<WidgetFaq2
  title="All Items Closed"
  openFirstItem={false}
  items={[
    {
      title: 'Question 1',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    },
    {
      title: 'Question 2',
      description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.',
    },
  ]}
/>

Props