Accordions

An accordion is a group of collapsible panels where opening one item closes the others. It is the go-to pattern for FAQs, feature breakdowns, and any list where only one answer should show at a time. Canvas ships bordered, background-filled, and plain variants.

Structure

.accordion: the wrapper for the group.
.accordion-header: a clickable header (repeated per item).
.accordion-icon with .accordion-closed and .accordion-open icons.
.accordion-title: the header label.
.accordion-content: the collapsible body that follows each header.

<div class="accordion" data-collapsible="true">

    <div class="accordion-header">
        <div class="accordion-icon">
            <i class="accordion-closed bi-check-circle-fill"></i>
            <i class="accordion-open bi-x-circle"></i>
        </div>
        <div class="accordion-title">Our Mission</div>
    </div>
    <div class="accordion-content">
        Our mission is to make professional web design accessible to everyone.
    </div>

    <div class="accordion-header">
        <div class="accordion-icon">
            <i class="accordion-closed bi-check-circle-fill"></i>
            <i class="accordion-open bi-x-circle"></i>
        </div>
        <div class="accordion-title">Our Vision</div>
    </div>
    <div class="accordion-content">
        We picture a web where anyone can build a remarkable site without friction.
    </div>

</div>

Key Attributes

data-active: 1-based index of the item open on load. Default: 1 (first item).
data-state: set to closed to start with all items collapsed.
data-collapsible: true allows clicking the open item to close it (so all can be closed). Default is non-collapsible.
data-speed: slide speed in milliseconds. Default: normal. Numeric values or jQuery keywords accepted.
data-active-class: extra class(es) added to the active header alongside accordion-active.

The plugin also supports deep-linking: if the URL hash matches an .accordion-header id, that item opens on load.

Variants

Bordered accordion:

<div class="accordion accordion-border">
    <div class="accordion-header">
        <div class="accordion-icon">
            <i class="accordion-closed bi-check-circle-fill text-success"></i>
            <i class="accordion-open bi-x-circle text-danger"></i>
        </div>
        <div class="accordion-title">Our Mission</div>
    </div>
    <div class="accordion-content">Content here.</div>
</div>

Background-filled accordion:

<div class="accordion accordion-bg" data-collapsible="true">
    <div class="accordion-header rounded bg-secondary text-light">
        <div class="accordion-icon">
            <i class="accordion-closed bi-check-circle-fill"></i>
            <i class="accordion-open bi-x-circle"></i>
        </div>
        <div class="accordion-title">Our Mission</div>
    </div>
    <div class="accordion-content">Content here.</div>
</div>

Active State and Scroll

The open header gets the accordion-active class (plus anything from data-active-class). On phones, adding scroll-on-open to the .accordion scrolls the newly opened item into view.

Tips

Use accordion-border or accordion-bg to match the surrounding design.
Set data-collapsible="true" when it is fine for every panel to be closed at once.
The .accordion-content must directly follow its .accordion-header since the plugin toggles the immediate next sibling.

Usage

<div class="accordion" data-collapsible="true">

	<div class="accordion-header">
		<div class="accordion-icon">
			<i class="accordion-closed icon-ok-circle"></i>
			<i class="accordion-open icon-remove-circle"></i>
		</div>
		<div class="accordion-title">
			Our Mission
		</div>
	</div>
	<div class="accordion-content">Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>

	<div class="accordion-header">
		<div class="accordion-icon">
			<i class="accordion-closed icon-ok-circle"></i>
			<i class="accordion-open icon-remove-circle"></i>
		</div>
		<div class="accordion-title">
			What we do?
		</div>
	</div>
	<div class="accordion-content">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum.</div>

	<div class="accordion-header" id="id-accordion-3">
		<div class="accordion-icon">
			<i class="accordion-closed icon-ok-circle"></i>
			<i class="accordion-open icon-remove-circle"></i>
		</div>
		<div class="accordion-title">
			Our Company's Value
		</div>
	</div>
	<div class="accordion-content">Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur.</div>

</div>

How to Use

Styles:

You can use 2 other styles for the Accordions. Eg. <strong>.accordion-bg</strong> or <strong>.accordion-border</strong>

Example:

<div class="accordion accordion-border clearfix" data-active="2">

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

</div>

Settings

Setting	Description
`data-state`	The State of the Accordions. Eg. closed to keep all the Accordions closed by default. Example: `open`
`data-active`	The Order Number of the Accordion which you want to activate on initialization. Example: Use `data-active="2"` to activate the Second Accordion on Initialization.

Was this page helpful?

Related docs

Tabs Toggles