Interactive

Accordion

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

Live demo

See it in action

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>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<div class="accordion ac-862740f7 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>
			</div>
		</div>
	</div>
</section>

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

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free