Accordion
Examples#
To render accordion, use the class chi-accordion
.
Base#
Content goes here
Content goes here
Content goes here
<div class="chi-accordion" id="example-base">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
<div class="chi-accordion__item -expanded">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 2</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 3</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 4</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
<script>
const accordionBase = document.getElementById('example-base');
chi.accordion(accordionBase);
</script>
Base#
Content goes here
Content goes here
Content goes here
<div class="chi-accordion" id="example-portal-base">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
<div class="chi-accordion__item -expanded">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion 3</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion 4</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
<script>
const accordionBase = document.getElementById('example-portal-base');
chi.accordion(accordionBase);
</script>
Card#
Content goes here
Content goes here
Content goes here
<div class="chi-accordion -card" id="example-portal-card">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
<div class="chi-accordion__item -expanded">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 2</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 3</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 4</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
<script>
const accordionCard = document.getElementById('example-portal-card');
chi.accordion(accordionCard);
</script>
Nested Accordions#
Content goes here
Content goes here
Content goes here
Content goes here
Content goes here
Content goes here
<div class="chi-accordion" id="nested-accordions">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Click me to expand Accordion</div>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 1.1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 1.1.1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 1.2</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 2</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 2.1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const accordionNested = document.getElementById('nested-accordions');
chi.accordion(accordionNested);
</script>
Nested Accordions#
Content goes here
Content goes here
Content goes here
Content goes here
Content goes here
Content goes here
<div class="chi-accordion" id="example-portal-nested">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Click me to expand Accordion</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion 1.1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion 1.1.1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion 1.2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion 2.1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const accordionNested = document.getElementById('example-portal-nested');
chi.accordion(accordionNested);
</script>
Show / Hide / Toggle of individual items of Accordion#
<button class="chi-button" id="toggle-accordion-1">Toggle item 1</button>
<button class="chi-button" id="toggle-accordion-2">Toggle item 2</button>
<div class="chi-accordion" id="individual-accordion-items">
<div class="chi-accordion__item -expanded">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion</div>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item" id="invividual-accordion-item-1">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion item 1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 1</p>
</div>
</div>
<div class="chi-accordion__item" id="invividual-accordion-item-2">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion item 2</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const individualAccordions = chi.accordion(document.getElementById("individual-accordion-items"));
const toggleAccordionOne = document.getElementById("toggle-accordion-1");
const toggleAccordionTwo = document.getElementById("toggle-accordion-2");
toggleAccordionOne.addEventListener("click", () => {
individualAccordions.toggle(document.getElementById("invividual-accordion-item-1"));
});
toggleAccordionTwo.addEventListener("click", () => {
individualAccordions.toggle(document.getElementById("invividual-accordion-item-2"));
});
</script>
Show / Hide / Toggle of individual items of Accordion#
<button class="chi-button" id="toggle-accordion-portal-1">Toggle item 1</button>
<button class="chi-button" id="toggle-accordion-portal-2">Toggle item 2</button>
<div class="chi-accordion" id="individual-portal-accordion-items">
<div class="chi-accordion__item -expanded">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item" id="invividual-portal-accordion-item-1">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 1</p>
</div>
</div>
<div class="chi-accordion__item" id="invividual-portal-accordion-item-2">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const individualAccordions = chi.accordion(document.getElementById("individual-portal-accordion-items"));
const toggleAccordionOne = document.getElementById("toggle-portal-accordion-1");
const toggleAccordionTwo = document.getElementById("toggle-portal-accordion-2");
toggleAccordionOne.addEventListener("click", () => {
individualAccordions.toggle(document.getElementById("invividual-portal-accordion-item-1"));
});
toggleAccordionTwo.addEventListener("click", () => {
individualAccordions.toggle(document.getElementById("invividual-portal-accordion-item-2"));
});
</script>
Expand / Collapse all Accordion items#
<button class="chi-button" id="expand-all">Expand all</button>
<button class="chi-button" id="collapse-all">Collapse all</button>
<div class="chi-accordion" id="expand-collapse">
<div class="chi-accordion__item -expanded">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion</div>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion item 1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 1</p>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion item 1.1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 1.1</p>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion item 1.2</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 1.2</p>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion item 2</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 2</p>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion item 2.1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 2.1</p>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion item 2.2</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 2.2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const expandCollapseAccordion = chi.accordion(document.getElementById("expand-collapse"));
const expandAll = document.getElementById("expand-all");
const collapseAll = document.getElementById("collapse-all");
expandAll.addEventListener("click", () => {
expandCollapseAccordion.expandAll();
});
collapseAll.addEventListener("click", () => {
expandCollapseAccordion.collapseAll();
});
</script>
Expand / Collapse all Accordion items#
<button class="chi-button" id="expand-all-portal">Expand all</button>
<button class="chi-button" id="collapse-all-portal">Collapse all</button>
<div class="chi-accordion" id="expand-collapse-portal">
<div class="chi-accordion__item -expanded">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 1</p>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion item 1.1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 1.1</p>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion item 1.2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 1.2</p>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 2</p>
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion item 2.1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 2.1</p>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion item 2.2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content of Accordion item 2.2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const expandCollapseAccordion = chi.accordion(document.getElementById("expand-collapse-portal"));
const expandAll = document.getElementById("expand-all-portal");
const collapseAll = document.getElementById("collapse-all-portal");
expandAll.addEventListener("click", () => {
expandCollapseAccordion.expandAll();
});
collapseAll.addEventListener("click", () => {
expandCollapseAccordion.collapseAll();
});
</script>
Disabled#
Make Accordions appear inactive by adding the class -disabled
or the attribute disabled
to Accordion trigger
Content goes here
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger -disabled">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
Disabled#
Make Accordions appear inactive by adding the class -disabled
or the attribute disabled
to Accordion trigger
Content goes here
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger -disabled">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion 1</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
Truncated#
Truncate long accordion titles by adding the class -truncated
to chi-accordion
.
Content goes here
<div class="chi-accordion -truncated" id="example-truncated">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis tellus enim. Nulla facilisi. Donec tortor elit, finibus ut lacus vel, elementum accumsan ex</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
<script>
const accordionTruncated = document.getElementById('example-truncated');
chi.accordion(accordionTruncated);
</script>
Truncated#
Truncate long accordion titles by adding the class -truncated
to chi-accordion
.
Content goes here
<div class="chi-accordion -truncated">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis tellus enim. Nulla facilisi. Donec tortor elit, finibus ut lacus vel, elementum accumsan ex</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
Sizes#
Accordion supports the following sizes: sm
, md
(default), lg
, and xl
.
sm
Content goes here
md
Content goes here
lg
Content goes here
xl
Content goes here
<!-- sm-->
<div class="chi-accordion -sm" id="example-size-sm">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
<!-- md-->
<div class="chi-accordion -md" id="example-size-md">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
<!-- lg-->
<div class="chi-accordion -lg" id="example-size-lg">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
<!-- xl-->
<div class="chi-accordion -xl" id="example-size-xl">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
<div class="chi-accordion__title">Accordion</div>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
<script>
chi.accordion(document.getElementById('example-size-sm'));
chi.accordion(document.getElementById('example-size-md'));
chi.accordion(document.getElementById('example-size-lg'));
chi.accordion(document.getElementById('example-size-xl'));
</script>
Sizes#
Accordion supports the following sizes: sm
, md
(default).
sm
Content goes here
md
Content goes here
<!-- sm-->
<div class="chi-accordion -sm" id="portal-example-size-sm">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
<!-- md-->
<div class="chi-accordion -md" id="portal-example-size-md">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Accordion</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<p class="chi-accordion__text">Content goes here</p>
</div>
</div>
</div>
<script>
chi.accordion(document.getElementById('portal-example-size-sm'));
chi.accordion(document.getElementById('portal-example-size-md'));
</script>
JavaScript#
Methods#
Method | Description | Returns |
---|---|---|
hide() => void | Hides the accordion or individual accordion item (if provided) | Type: void |
show() => void | Shows the accordion or individual accordion item (if provided) | Type: void |
toggle() => void | Toggles active state (show/hide) of the accordion or accordion item (if provided) | Type: void |
expandAll() => void | Expands all the accordion items | Type: void |
collapseAll() => void | Collapses all the accordion items | Type: void |
Accordion accepts the following configurations to customize its behavior.
Preventing memory leaks#
Accordion component has a dispose function to free all the resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.
var elem = document.getElementById('accordion-1');
var accordion = chi.accordion(elem);
// do stuff
accordion.dispose();
It is safe to call the accordion
method more than once, as it will return any previously created accordion component
associated with the element.
var elem = document.getElementById('accordion-2');
var accordion = chi.accordion(elem);
var elem2 = document.getElementById('accordion-2');
var accordion2 = chi.accordion(elem2);
accordion === accordion2; // returns true
accordion.dispose(); // Only have to do it once.