Accordion Component Uses

ℹ️

This component is used to display the faqs anywhere in the site. You can use it in any page or template. It is also used in the home page to display the faqs. You can customize the faqs by using the

Example Preview

Accordion Example

Options

The following options are available for the faqs component:

Option	Description	Default
`className`	The class name for the component.	`''`
`itemClassName`	The class name for the faq item.	`''`

Example Usage

The following example shows how to use the faqs component:

import React from "react";
import { Accordion } from "@/@core";
 
export const FaqsComponent = () => (
  <Accordion
    data={[
      {
        question: "How to use this template?",
        answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
        open: true,
      },
      {
        question: "How to use for commercial purpose?",
        answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
        open: false,
      },
    ]}
  />
);

Customization Options

The following customization options are available for the faqs component:

Option	Description	Default
`className`	The class name for the component.	`''`
`itemClassName`	The class name for the faq item.	`''`
`icon`	The icon for the faq item. `plus` or `arrow`	`plus`

Icon Options

The following icon options are available for the faqs component:

Option	Description	Default
`plus`	The push icon for the faq item. `default`	`''`
`arrow`	The arrow icon for the faq item.	`''`

Example Customization

The following example shows how to customize the faqs component:

const FaqsCustomization = () => (
  <Accordion
    className={"my-10 p-10"}
    itemClassName={"bg-accent/5 p-10 border-2 border-accent/20"}
    icon={"arrow"}
    data={[
      {
        question: "How to use this template?",
        answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
        open: true,
      },
      {
        question: "How to use for commercial purpose?",
        answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
        open: false,
      },
    ]}
  />
);

Props Table

The following props table shows the available props for the faqs component:

Name	Type	Default	Description
`className`	`string`	`''`	The class name for the component.
`itemClassName`	`string`	`''`	The class name for the faq item.
`data`	`array`	`[]`	The faqs data.
`icon`	`string`	`plus`	The icon for the faq item. `plus` or `arrow`

Accordion Data Structure

The following data structure shows the data required for the faqs component:

const data = [
  {
    question: "How to use this template?",
    answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
    open: true,
  },
  {
    question: "How to use for commercial purpose?",
    answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
    open: false,
  },
];

Accordion Data Structure

The following data structure shows the data required for the faqs component:

Name	Type	Description
`question`	`string`	The question for the faq.
`answer`	`string`	The answer for the faq.
`open`	`bool`	The open state for the faq item.

ℹ️

Note: The Accordion component is a flexible React component designed for creating interactive accordion-style UIs with collapsible sections. It provides a convenient way to organize and present content in a structured manner. This component is inspired by the DaisyUI (opens in a new tab) framework's design for accordions. Check it out for more awesome components.

Logo Alert