The accordion component is used to display a large amount of content in a small space. The accordion should be used to group related content together.
Example
Expanded accordion panelExpanded accordion content
Disabled accordion headerDisabled accordion content
Collapsed accordionCollapsed accordion content
code
<script type="module">
import '@blueprintui/components/include/accordion.js';
</script>
<bp-accordion>
<bp-accordion-panel expanded>
<bp-accordion-header>Expanded accordion panel</bp-accordion-header>
<bp-accordion-content>
<p bp-text="content">Expanded accordion content</p>
</bp-accordion-content>
</bp-accordion-panel>
<bp-accordion-panel>
<bp-accordion-header disabled>Disabled accordion header</bp-accordion-header>
<bp-accordion-content>
<p bp-text="content">Disabled accordion content</p>
</bp-accordion-content>
</bp-accordion-panel>
<bp-accordion-panel>
<bp-accordion-header>Collapsed accordion</bp-accordion-header>
<bp-accordion-content>
<p bp-text="content">Collapsed accordion content</p>
</bp-accordion-content>
</bp-accordion-panel>
</bp-accordion>
Install
NPM
import '@blueprintui/components/include/accordion.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/accordion.js/+esm';
</script>
Accessibility
- Use clear, descriptive titles or headings for the accordion sections.
- Ensure keyboard navigation order is not disrupted.
- Provide an alternative way for users to access the content in the accordion sections, such as a "show all" or "expand all" button.
bp-accordion
Properties
Name | Types | Description |
---|
layer | 'flat' | 'container' | determines the visual layer style (container vs flat for nesting) |
Attributes
Name | Types | Description |
---|
layer | 'flat' | 'container' | determines the visual layer style (container vs flat for nesting) |
CSS Properties
Name | Types | Description |
---|
--border-color | | |
--border-width | | |
--border-radius | | |
--background | | |
Slots
Name | Types | Description |
---|
default | | bp-accordion-panel |
bp-accordion-panel
Properties
Name | Types | Description |
---|
expanded | boolean | determine if element is expanded |
Attributes
Name | Types | Description |
---|
expanded | boolean | determine if element is expanded |
Slots
Name | Types | Description |
---|
default | | slot for header and content |
bp-accordion-header | | |
bp-accordion-content | | |
Properties
Name | Types | Description |
---|
pressed | boolean | turns the button into a toggle button |
selected | boolean | indicate the current "selected" state of various widgets |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current |
value | string | determines the current value |
popoverTargetElement | HTMLElement | The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
popoverTargetAction | | 'toggle' | 'show' | 'hide' | The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction |
popovertarget | string | The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
command | string | The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
commandFor | string | The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
form | HTMLFormElement | |
formAction | string | |
formEnctype | string | |
formMethod | string | |
formNoValidate | boolean | |
formTarget | string | |
labels | NodeListOf | |
validationMessage | string | |
validity | ValidityState | |
willValidate | boolean | |
checkValidity | any | |
reportValidity | any | |
setCustomValidity | any | |
formAssociated | boolean | |
Attributes
Name | Types | Description |
---|
pressed | boolean | turns the button into a toggle button |
selected | boolean | indicate the current "selected" state of various widgets |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current element as a string. |
value | string | determines the current value |
popoverTargetElement | HTMLElement | The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
popovertargetaction | | 'toggle' | 'show' | 'hide' | The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction |
popovertarget | string | The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
command | string | The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
commandFor | string | The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
CSS Properties
Name | Types | Description |
---|
--background | | |
--color | | |
--font-size | | |
--padding | | |
Slots
Name | Types | Description |
---|
default | | slot for header content |
bp-accordion-content
Properties
CSS Properties
Name | Types | Description |
---|
--color | | |
--font-size | | |
--font-weight | | |
--background | | |
Slots
Name | Types | Description |
---|
default | | slot for content |