Accordion
Expandable FAQ or content 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
}
}