FAQ

All FAQ components have same props.

​

Propeties

​

Data

data: FaqItem[]

Array of items to render. Each FAQ item should have title (question) and content (answer).

​

Type

type?: "single" | "multiple"

Determines whether a one or many items can be opened at a time.
Defaults to single.

​

Allow closing content

collapsible?: boolean

Set this to the true or false to allow or disabled closing of the content for an open item.
Defaults to true.

​

Expand first item

expand?: boolean

Set this to the true or false to open or close the very first item.
Defaults to false.

​

Expand all items

expandAll?: boolean

Set this to the true to expand all items.
Defaults to false.

​

Icon

icon?: "plus" | "chevron"

Set the icon for open/close state.
Defaults to plus.

You can easily customize the icons if you want to use something else.

​

Search

search?: boolean

Display search input above the items to allow users to filter FAQ items by title or content.
Defaults to true.

​

Transitions

animate?: boolean

When true the icon and content will transition/animate while expanding, when false the expand will be instant without any transitions.

Defaults to value of VITE_ANIMATIONS in your .env file.

​

Default component

resources/js/Components/Sections/Faq.vue

This component renders the FAQ in minimalistic styles, using bottom border as separators between items.

​

Blocks component

resources/js/Components/Sections/FaqBlocks.vue

This component renders the FAQ in blocks with (secondary) background color, using small gaps as separators between items.