FBK Accordion

Drop FBK Accordion items, or a query loop, into the Items slot.

Used in 16 templates
20 options
Includes FBK Accordion item
Native Bricks element

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

One FBK Accordion, as in the first example below. Change anything from the panel after you paste it.

In the annual plan, $99/year. See plans

Every FBK Accordion variation

Live from the demo site. Switch the width and the background, or open it full screen.

Preview of the accordion template: every style of the FBK Accordion component for Bricks Builder in one place

The options

Every property of the component, in the order the Bricks panel shows them. FBK Accordion item has its own, in each piece you drop in.

The options of FBK Accordion
Option	Choices	Default
Open the first item	On or off	Off
Several open at onceOff: opening an item closes the one that was open.	On or off	Off
FAQ schemaAdds FAQPage structured data for search engines. Only for real questions and answers, once per page.	On or off	Off
StyleLines: a rule under each item. Cards: each item on its own surface. Box: one framed list.	Lines, Cards, Box	Lines
Open item accentLine: an accent line under the open title (short rules under the closed ones). Bar: an accent bar beside the open item.	None, Line under the title, Bar beside	None
Open title color	Same as closed, Accent color	Same as closed
IconArrow: the item's icon turns over when it opens. Plus: a «+» that becomes «−».	Arrow, Plus	Arrow
LookPlain: no box. Soft: a tinted box that fills on hover. Outline: a thin edge that fills on hover. Solid: filled. Elevated: a raised surface with a small shadow. The same looks as every Fancy Bricks component (and the buttons: Ghost, Secondary, Outline, Primary).	Plain, Soft, Outline, Solid, Elevated	Soft
ToneBrand: your accent color. Neutral: the text color around it. White: the same on every background, for controls over photos.	Brand, Neutral, White	Neutral
ShapeRound: a circle on icons, a pill on text. Blob: a bubble that turns round on hover (icons).	Rounded, Round, Square, Blob	Round
Size	Small, Medium, Large	Small
Hover effectThe color always changes on hover and keyboard focus. Grow: the icon grows. Pop: the piece grows. Lift: the piece rises a little. Spin: the icon turns once. No motion with reduced motion.	None, Grow, Pop, Lift, Spin	Grow
Icon position	End, Start	End
Numbers01, 02… before each title, in the accent color.	Off, On	Off
Columns2 columns on desktop, one on tablet and phones.	1, 2	1
Hover effectUnder the mouse (and on keyboard focus), the icon background fills and the accent line or bar shows. «Fill and slide» also moves the title in a little.	None, On, Fill and slide	None
Title color on hoverThe title under the mouse (and on keyboard focus) takes the accent color.	Off, On	Off
BackgroundDark or Brand when the accordion sits on a dark or brand background you made. Fancy Bricks sections set this for you.	Auto, Light, Dark, Brand	Auto
Time per itemOnly when the accordion plays by itself (the «Autoplay» script of the Autoplay accordion and Accordion with photos templates): how long each item stays open before the next one opens.	4 s, 5 s, 7 s, 10 s, 14 s	7 s
Autoplay on phonesOff: on phones the accordion does not play by itself and the pause button hides (opening an item changes the height and would push the page while people read). On: it plays on phones too.	Off, On	Off