Interactive

Accordion

Stacked panels that expand one at a time, handy for FAQs.

Live demo

See it in action

Style

Bordered

One rounded box with hairline dividers — the default.

Yes — the framework, the theme and every element are free and open-source under the GPL. There are no paid tiers and no locked elements.

Style

Separated

Each item is its own standalone card.

Yes — the framework, the theme and every element are free and open-source under the GPL. There are no paid tiers and no locked elements.

Style

Flush

Hairline dividers only — an editorial FAQ.

Yes — the framework, the theme and every element are free and open-source under the GPL. There are no paid tiers and no locked elements.

Style

Filled

Soft, tinted title bars.

Yes — the framework, the theme and every element are free and open-source under the GPL. There are no paid tiers and no locked elements.

Style

Ghost

Borderless, with an accent underline on the open item.

Yes — the framework, the theme and every element are free and open-source under the GPL. There are no paid tiers and no locked elements.

Icon

Chevron icon

Swap the toggle indicator (also Plus/X, Arrow, or a custom image/emoji).

Yes — the framework, the theme and every element are free and open-source under the GPL. There are no paid tiers and no locked elements.

Numbering

Q1, Q2, Q3…

Prefix each title — numbers, letters, roman, or a Q-prefix for FAQs.

Yes — the framework, the theme and every element are free and open-source under the GPL. There are no paid tiers and no locked elements.

Behavior

Multiple open + Expand all

Allow several panels open at once, with an Expand / Collapse-all control.

Yes — the framework, the theme and every element are free and open-source under the GPL. There are no paid tiers and no locked elements.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="accordion accordion-icon-plus-minus accordion-icon-right accordion-title-align-left accordion-style-bordered accordion-radius-md accordion-elev-none accordion-hover" data-icon-style="plus-minus" data-icon-position="right" data-initially-open="first" data-collapsible="true" data-multiple-open="false" data-hash-linking="true" id="accordion-1">
		<div class="accordion-item">
			<h3 class="accordion-title ui-state-active"><button type="button" class="accordion-trigger" id="accordion-1-header-0" aria-controls="accordion-1-panel-0" aria-expanded="true"><span class="accordion-icon" aria-hidden="true"></span><span class="accordion-title-text">Is UnysonPlus really free?</span></button></h3>
			<div class="accordion-content" id="accordion-1-panel-0" role="region" aria-labelledby="accordion-1-header-0" aria-hidden="false" style="display:block;">
				<p>Yes — the framework, the theme and every element are free under the GPL.</p>
			</div>
		</div><!-- /.accordion-item -->
		<div class="accordion-item">
			<h3 class="accordion-title"><button type="button" class="accordion-trigger" id="accordion-1-header-1" aria-controls="accordion-1-panel-1" aria-expanded="false"><span class="accordion-icon" aria-hidden="true"></span><span class="accordion-title-text">Do I need to know how to code?</span></button></h3>
			<div class="accordion-content" id="accordion-1-panel-1" role="region" aria-labelledby="accordion-1-header-1" aria-hidden="true" style="display:none;">
				<p>No. Everything is built visually in the page builder.</p>
			</div>
		</div><!-- /.accordion-item -->
	</div>
</section>

To learn more about the Accordion shortcode, please check out the online manual here.