Accordion

Type: "accordion"

Expandable FAQ or content accordion.

Props

Field	Type	Default	Keterangan
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."}]	Items
items[].title	string	—	Judul
items[].subtitle	string	—	Subtitle (opsional)
items[].content	string (HTML)	—	Konten
items[].anchorId	string	—	Untuk deep link `#anchor`. Tanpa spasi, tanpa tanda pagar.
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)	—	Diterapkan saat item terbuka (animasi rotate).
expandItem	string	—	Indeks item yang terbuka saat load, dipisah koma. Mulai dari 0.
independentToggle	boolean	false	Tanpa ini, buka satu item akan menutup yang lain.
transition	number (0–2000)	200	Transisi (ms)
faqSchema	boolean	false	Hasilkan structured data FAQPage untuk SEO.

Contoh

{
  "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
  }
}