Layout widget
Accordion
Questions and answers that open one at a time. Each panel holds any widgets, and FAQ structured data is one switch away.
Build it with your AI
“Add an FAQ with four questions about shipping and returns, first one open, with FAQ structured data.”
Live demo
See it working
Settings
27 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
9 settings
Accordion
Items
Title HTML tag
First item open
Allow several open items
Icon
Active icon
Icon position
Animation duration (ms)
FAQ schema
Design
18 settings
Items
Space between items
Background
Border
Open item border color
Border radius
Shadow
Title
Typography
Padding
Alignment
Color
Background
Icon
Size
Spacing
Color
Open color
Content
Background
Padding
Border
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Accordion settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add an FAQ with four questions about shipping and returns, first one open, with FAQ structured data.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{
"type": "accordion",
"settings": {
"items": [
{ "title": "How long does shipping take?" },
{ "title": "Can I return an order?" },
{ "title": "Do you ship abroad?" },
{ "title": "How do I track my parcel?" }
],
"first_open": true,
"faq_schema": true
},
"children": [
{
"type": "container",
"label": "Panel",
"settings": {
"gap": { "size": 10, "unit": "px" },
"_padding": {
"top": 4,
"right": 0,
"bottom": 4,
"left": 0,
"unit": "px",
"linked": false
}
},
"children": [
{
"type": "text-editor",
"settings": {
"content": "<p>Orders ship within two working days and arrive in three to five.</p>"
}
}
]
},
"… 3 more like this"
]
}More layout widgets