Accordion Block
A container for collapsible FAQ or content sections. Each item has a clickable title that reveals its content. Controls the toggle icon, item styling, border/shadow, and background for both open and closed states.
INTERACTIVE PREVIEW
What is included in the plan?
All plans include access to the full block library, design token system, and 260+ pre-designed sections. Premium plans add priority support and early access to new features.
Can I cancel anytime?
Yes, cancel anytime from your account settings — no long-term commitment required.
Do you offer a free trial?
Yes, every plan starts with a 14-day free trial. No credit card required.
First item shown open. Click/tap toggles are handled by view.js on the live site.
When to use this block
- FAQ sections with questions and answers
- Feature details that expand on click
- Pricing comparison details, terms & conditions
- Any content that benefits from progressive disclosure
Block Structure
The accordion is a parent container with a specific nesting hierarchy. Each item has a title (with the toggle icon) and content area that can hold any blocks.
NESTING HIERARCHY
Accordion Block
Accordion Item
Accordion Title — heading + icon
Any blocks — the collapsible content
Accordion Item
...
Toggle Icon
Upload a custom SVG icon (chevron, plus/minus, arrow) that appears on every item title. Control its size and how many degrees it rotates when the item opens.
Icon
Sidebar Panel
Icon
chevron.svg
Width
px
Height
px
Rotation
deg
ROTATION EXAMPLES
Closed
Open (180°)
The icon rotates by the specified degrees when an item opens. Set to 180 for a flip, 90 for a quarter turn, 45 for a subtle tilt.
Item Styling
Style all accordion items from the parent. Background, padding, margin, and border radius are set once and apply uniformly.
Item Style
Sidebar Panel
Background
#FFFFFF
Active Background
#F7F7F7
Item Padding
16
Item Margin
8
CLOSED VS OPEN BACKGROUND
Closed item
#FFFFFF
Open item
#F7F7F7
Content visible when expanded.
Closed item
#FFFFFF
Border & Shadow
Add border or shadow to accordion items. Control whether the styling applies to closed items, open items, or both.
Border / Shadow
Sidebar Panel
Shadow
sm
Apply to closed
Apply to open
STATE TARGETING
Both (default)
All items styled
Closed only
Border hides on open
Open only
Border appears on open
Neither
No border/shadow
Shadow presets: sm, base, md, lg, xl, 2xl, inner. Shadow takes priority over border when both are set.
Item Border Radius
Round the corners of each accordion item. Per-corner control, responsive across breakpoints.
Item Radius
Per-corner, responsive
Top Left
12
Top Right
12
Bottom Left
12
Bottom Right
12
Responsive: Mobile Tablet Desktop
Spacing
Two levels of spacing: the wrapper (outer) and each item (inner). Both are responsive.
Wrapper Spacing
Padding (all 4 sides) and margin (top/bottom) on the outer accordion container.
Item Spacing
Padding (all 4 sides) and margin (top/bottom) on each individual accordion item. Controls the gap between items and inner breathing room.
Responsive: Mobile Tablet Desktop
All Available Controls
Toggle Icon SVG upload, size, rotation
iconUrl/iconId: SVG icon. iconWidth/iconHeight: size in px (default 24). iconRotation: degrees the icon rotates when open (e.g. "180"). Passed to children via block context.
Item Background Closed + open/active colors
itemBgColor: background for all items. itemActiveBgColor: background when item is open (.accordion-item--open class toggled by JS).
Border & Shadow Per-item, with open/closed targeting
borderShadow: shadow preset (sm–2xl, inner). borderMobile/Tablet/Desktop: responsive border objects. borderOnClosed/borderOnOpen: toggle which state gets the styling. Shadow takes priority over border.
Item Border Radius Per-corner, 3 breakpoints
itemBorderRadiusMobile/Tablet/Desktop: per-corner objects (topLeft, topRight, bottomRight, bottomLeft). Applied to .accordion-item.
Item Spacing Per-item padding & margin, 3 breakpoints
itemPaddingTop/Bottom/Left/Right (+Md/Lg): inner padding on each item. itemMarginTop/Bottom (+Md/Lg): spacing between items. All in px.
Wrapper Spacing Outer padding & margin, 3 breakpoints
Padding: paddingTop/Bottom/Left/Right (+Md/Lg). Margin: marginTop/Bottom (+Md/Lg). All in px. Applied to the outer accordion wrapper.