Accordion

Type: "accordion"

Expandable FAQ or content accordion.

Props

Field	Type	Default	Description
items	Array<object>	[{"id":"acc-1","title":"Apa itu layanan ini?","content":"Jelaskan layanan kamu di sini."},{"id":"acc-2","title":"Bagaimana cara mendaftar?","content":"Tuliskan langkah-langkahnya di sini."}]	AccordionItem[] — each: { id, title, content, icon? }
items[].title	string	—	Judul
items[].subtitle	string	—	Subtitle (opsional)
items[].content	string (HTML)	—	Konten
items[].anchorId	string	—	ID Anchor (opsional)
titleTag	'div'|'h1'|'h2'|'h3'|'h4'|'h5'|'h6'	"h3"	Title Tag
icon	string (icon name)	{"library":"lucide","icon":"ChevronRight"}	Icon (collapsed)
iconExpanded	string (icon name)	{"library":"lucide","icon":"ChevronDown"}	Icon (expanded)
iconPosition	'right'|'left'	"right"	Posisi Icon
iconRotate	number (-360–360)	—	Rotasi Icon (°)
expandItem	string	—	Expand Items (indeks)
independentToggle	boolean	false	Boleh buka beberapa sekaligus
transition	number (0–2000)	200	Transisi (ms)
faqSchema	boolean	false	FAQ Schema (JSON-LD)

Example

{
  "id": "acc01abc",
  "type": "accordion",
  "props": {
    "items": [
      {
        "id": "acc-1",
        "title": "Apa itu layanan ini?",
        "content": "Jelaskan layanan kamu di sini."
      },
      {
        "id": "acc-2",
        "title": "Bagaimana cara mendaftar?",
        "content": "Tuliskan langkah-langkahnya di sini."
      }
    ],
    "titleTag": "h3",
    "icon": {
      "library": "lucide",
      "icon": "ChevronRight"
    },
    "iconExpanded": {
      "library": "lucide",
      "icon": "ChevronDown"
    },
    "iconPosition": "right",
    "expandItem": "",
    "independentToggle": false,
    "transition": 200,
    "faqSchema": false
  }
}