Accordion
A vertically stacked list of headers that reveal or hide associated sections of content.
#
Usage
Follow the tutorials here to use the HTMLPLUS library on JAVASCRIPT projects.
npm install @htmlplus/ui
#
APIs
Click here to learn more about the Properties, Slots, Events, CSS Variables, CSS Parts, and Methods.
#
Global Config
See the elements's config. Full documentation is available.
#
Examples
Below is a collection of simple to complex examples.
#
Default
PreviewTemplateScriptStyle <plus-accordion summary="Summary">
<plus-faker></plus-faker>
</plus-accordion>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/faker.js';
#
Disabled
PreviewTemplateScriptStyle <plus-accordions>
<plus-accordion summary="First">
<plus-faker></plus-faker>
</plus-accordion>
<plus-accordion summary="Second">
<plus-faker></plus-faker>
</plus-accordion>
<plus-accordion summary="Third" disabled>
<plus-faker></plus-faker>
</plus-accordion>
</plus-accordions>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/accordions.js';
import '@htmlplus/ui/faker.js';
#
Open
PreviewTemplateScriptStyle <plus-accordion summary="Summary" open>
<plus-faker></plus-faker>
</plus-accordion>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/faker.js';
#
Methods
Open the developer console.
PreviewTemplateScriptStyle <plus-stack gap="1rem">
<button id="$collapse">Collapse</button>
<button id="$expand">Expand</button>
<button id="$toggle">Toggle</button>
</plus-stack>
<br />
<plus-accordion id="$accordion" summary="Summary">
<plus-faker></plus-faker>
</plus-accordion>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/faker.js';
import '@htmlplus/ui/stack.js';
$collapse.addEventListener('click', () => {
$accordion.collapse();
});
$expand.addEventListener('click', () => {
$accordion.expand();
});
$toggle.addEventListener('click', () => {
$accordion.toggle();
});
#
Persistent
PreviewTemplateScriptStyle <plus-accordions persistent>
<plus-accordion summary="First">
<plus-faker></plus-faker>
</plus-accordion>
<plus-accordion summary="Second">
<plus-faker></plus-faker>
</plus-accordion>
<plus-accordion summary="Third">
<plus-faker></plus-faker>
</plus-accordion>
</plus-accordions>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/accordions.js';
import '@htmlplus/ui/faker.js';
#
Custom Icon
PreviewTemplateScriptStyle <plus-accordion summary="First">
<plus-icon slot="icon-expand" name="plus"></plus-icon>
<plus-icon slot="icon-collapse" name="dash"></plus-icon>
<plus-faker></plus-faker>
</plus-accordion>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/faker.js';
import '@htmlplus/ui/icon.js';
#
Customized
PreviewTemplateScriptStyle <plus-accordions>
<plus-accordion summary="First">
<plus-faker></plus-faker>
</plus-accordion>
<plus-accordion summary="Second">
<plus-faker></plus-faker>
</plus-accordion>
<plus-accordion summary="Third">
<plus-faker></plus-faker>
</plus-accordion>
</plus-accordions>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/accordions.js';
import '@htmlplus/ui/faker.js';
plus-accordion {
border: 2px solid whitesmoke;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
plus-accordion:not(:last-of-type) {
margin-bottom: 0.5rem;
}
plus-accordion::part(body),
plus-accordion::part(svg) {
transition: all 0.5s ease-out;
}
plus-accordion::part(header) {
column-gap: 0.5rem;
flex-direction: row-reverse;
padding: 0.75rem;
}
plus-accordion[state^='expand']::part(header) {
font-weight: bold;
}
plus-accordion[state^='expand']::part(svg) {
fill: gray;
transform: rotate(90deg);
}
plus-accordion[state^='collap']::part(svg) {
fill: gray;
transform: rotate(0deg);
}
#
Custom Summary Template
PreviewTemplateScriptStyle <plus-accordion>
<plus-stack slot="summary" justify="between">
<b>Summary</b>
<button>Action</button>
</plus-stack>
<plus-faker></plus-faker>
</plus-accordion>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/faker.js';
import '@htmlplus/ui/stack.js';
plus-stack[slot='summary'] {
flex-grow: 1;
margin-inline-end: 1rem;
}
#
Prevent From Toggling
PreviewTemplateScriptStyle <plus-accordion summary="Summary" id="$accordion">
<plus-faker></plus-faker>
</plus-accordion>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/faker.js';
$accordion.addEventListener('plus-collapse', (event) => {
if (confirm('Are you sure you want to collapse it?')) return;
event.preventDefault();
});
$accordion.addEventListener('plus-expand', (event) => {
if (confirm('Are you sure you want to expand it?')) return;
event.preventDefault();
});
#
Slots
PreviewTemplateScriptStyle <div>
<plus-accordion summary="Summary" open>
<plus-progress-bar variant="indeterminate" style="height: 2px" slot="top"></plus-progress-bar>
<plus-faker seed="0"></plus-faker>
</plus-accordion>
</div>
<br />
<div>
<plus-accordion summary="Summary" open>
<plus-progress-bar
variant="indeterminate"
style="height: 2px"
slot="middle"
></plus-progress-bar>
<plus-faker seed="0"></plus-faker>
</plus-accordion>
</div>
<br />
<div>
<plus-accordion summary="Summary" open>
<plus-progress-bar
variant="indeterminate"
style="height: 2px"
slot="bottom"
></plus-progress-bar>
<plus-faker seed="0"></plus-faker>
</plus-accordion>
</div>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/faker.js';
import '@htmlplus/ui/progress-bar.js';
import '@htmlplus/ui/stack.js';
#
Async Content
PreviewTemplateScriptStyle <plus-accordion id="$accordion" summary="Summary">
<plus-progress-bar
id="$progress"
variant="indeterminate"
slot="top"
style="height: 2px"
hidden
></plus-progress-bar>
<plus-faker></plus-faker>
</plus-accordion>
import '@htmlplus/ui/accordion.js';
import '@htmlplus/ui/faker.js';
import '@htmlplus/ui/progress-bar.js';
$accordion.addEventListener('plus-expand', (event) => {
event.preventDefault();
$progress.hidden = false;
setTimeout(() => {
$progress.hidden = true;
$accordion.open = true;
}, 2500);
});
#
Last Modified