Accordion

Grouped panels that expand and collapse vertically.

Basic accordion

By default each panel in a group is independent. Wrap them in [data-panel-group] to scope the group.

    • This is our most important feature ever!
    • Starter Plan: Whenever you don’t want to pay a lot.
    • Professional Plan: Ideal for managers who like to spend money!
    • If you send us an email, we will probably ignore it.
    • We don’t even have a community forum.
    • Opening an issue on GitHub is your next best option. Or even better: PR’s! You do the work!

Because Panel auto-detects any panel that directly follows the trigger, you can keep the markup very simple.

HTML 
<ul data-panel-group>
	<li>
		<button data-panel-trigger>Toggle</button>
		<div data-panel>
			<div class="panel-wrapper">Content</div>
		</div>
	</li>
</ul>

One open at a time

Add data-panel-close-siblings to the group element to automatically close the other panels when one opens. No extra JavaScript needed.

    • This is our most important feature ever!
    • We worked on it for years.

Note: whenever this is set, the closing of any opened sibling will use the --ps-open-speed and --ps-open-timing CSS variables for its transition. This is because we want to avoid mismatched transitions that may result in a wobbly look. See the examples above: when any of the panels is open, clicking the other will not result in a surrounding container that changes height. Maybe a few subpixels, but that is to be expected.

You can also enable this per-panel via the closeSiblings JS option, or opt individual panels out with data-panel-close-siblings="false".

HTML (group-level)

HTML 
<ul data-panel-group data-panel-close-siblings>...</ul>

JavaScript (init-level)

JS 
Panel.init('[data-panel]', { closeSiblings: true });

For full details see Grouping panels (accordion) in the configuration reference.