Accordion
Accordion
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="id_68df02e9053fc" data-uid="68df02e90540f">
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-id_68df02e9053fc-0" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68df02e905596">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-id_68df02e9053fc-0" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-id_68df02e9053fc-1" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68df02e905601">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-id_68df02e9053fc-1" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-id_68df02e9053fc-2" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68df02e905649">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-id_68df02e9053fc-2" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-id_68df02e9053fc-3" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68df02e90568c">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-id_68df02e9053fc-3" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>@accordion(
[
'list'=> [
['heading' => "Your heading", 'content' => "Lorem ipsum dolor sit amet."],
['heading' => "Your heading", 'content' => "Lorem ipsum dolor sit amet."],
['heading' => "Your heading", 'content' => "Lorem ipsum dolor sit amet."],
['heading' => "Your heading", 'content' => "Lorem ipsum dolor sit amet."]
]
]
)
@endaccordionUsing a slot
Giving you more flexibility
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="id_68df02e9058cc" data-uid="68df02e9058d3">
<div class="c-accordion c-accordion__section" id="id_68df02e905737" data-uid="68df02e905741"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_68df02e905737" aria-expanded="false" js-expand-button href="#id_68df02e905737">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h2 class="c-typography c-typography__variant--h4" data-uid="68df02e9057a3">
First item
</h2>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68df02e9057e3">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_68df02e905737" aria-hidden="true">
<div id="" class="c-collection" data-uid="5f8fe0c4ac047">
<!-- collection__item.blade.php -->
<a id="" class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="5f8fe0c4ab694">
<div class="c-collection__content">
Linked item
</div></a> <!-- collection__item.blade.php -->
<div id="" class="c-collection__item" data-uid="5f8fe0c4ab97f">
<div class="c-collection__content">
Unlinked item
</div>
</div><!-- collection__item.blade.php -->
<div id="" class="c-collection__item" data-uid="5f8fe0c4abc86">
<div class="c-collection__content">
Unlinked item
</div>
</div>
</div>
</div>
</div>
<div class="c-accordion c-accordion__section" id="id_68df02e905820" data-uid="68df02e905833"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_68df02e905820" aria-expanded="false" js-expand-button href="#id_68df02e905820">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="68df02e905862">
Second Item
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68df02e905896">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_68df02e905820" aria-hidden="true">
<div id="" class="c-collection" data-uid="5f8fe0c4ac047">
<!-- collection__item.blade.php -->
<a id="" class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="5f8fe0c4ab694">
<div class="c-collection__content">
Linked item
</div></a> <!-- collection__item.blade.php -->
<div id="" class="c-collection__item" data-uid="5f8fe0c4ab97f">
<div class="c-collection__content">
Unlinked item
</div>
</div><!-- collection__item.blade.php -->
<div id="" class="c-collection__item" data-uid="5f8fe0c4abc86">
<div class="c-collection__content">
Unlinked item
</div>
</div>
</div>
</div>
</div>
</div>@accordion([])
@accordion__item([
'heading' => 'First item'
])
<div id="" class="c-collection" data-uid="5f8fe0c4ac047">
<!-- collection__item.blade.php -->
<a id="" class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="5f8fe0c4ab694">
<div class="c-collection__content">
Linked item
</div></a> <!-- collection__item.blade.php -->
<div id="" class="c-collection__item" data-uid="5f8fe0c4ab97f">
<div class="c-collection__content">
Unlinked item
</div>
</div><!-- collection__item.blade.php -->
<div id="" class="c-collection__item" data-uid="5f8fe0c4abc86">
<div class="c-collection__content">
Unlinked item
</div>
</div>
</div>
@endaccordion__item
@accordion__item([
'heading' => 'Second Item'
])
<div id="" class="c-collection" data-uid="5f8fe0c4ac047">
<!-- collection__item.blade.php -->
<a id="" class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="5f8fe0c4ab694">
<div class="c-collection__content">
Linked item
</div></a> <!-- collection__item.blade.php -->
<div id="" class="c-collection__item" data-uid="5f8fe0c4ab97f">
<div class="c-collection__content">
Unlinked item
</div>
</div><!-- collection__item.blade.php -->
<div id="" class="c-collection__item" data-uid="5f8fe0c4abc86">
<div class="c-collection__content">
Unlinked item
</div>
</div>
</div>
@endaccordion__item
@endaccordionA accordion with spaced items
<!-- accordion.blade.php -->
<div class="c-accordion c-accordion--spaced-sections" js-expand-container id="id_68df02e905932" data-uid="68df02e905939">
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-id_68df02e905932-0" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68df02e905973">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-id_68df02e905932-0" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-id_68df02e905932-1" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68df02e9059bc">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-id_68df02e905932-1" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-id_68df02e905932-2" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68df02e9059f9">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-id_68df02e905932-2" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-id_68df02e905932-3" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68df02e905a32">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-id_68df02e905932-3" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>@accordion(
[
'spacedSections' => true,
'list'=> [
['heading' => "Your heading", 'content' => "Lorem ipsum dolor sit amet."],
['heading' => "Your heading", 'content' => "Lorem ipsum dolor sit amet."],
['heading' => "Your heading", 'content' => "Lorem ipsum dolor sit amet."],
['heading' => "Your heading", 'content' => "Lorem ipsum dolor sit amet."]
]
]
)
@endaccordionBlade component parameters
| Key | Default value | Type | Available values | Description |
| id | string | - | ID for the accordion | |
| list | [] | array | - | List of accordion section |
| beforeHeading | string | - | Insert before heading | |
| afterHeading | string | - | Insert after heading | |
| beforeContent | <p> | string | - | Insert before content |
| afterContent | </p> | string | - | Insert after content |
| componentElement | div | string | - | Component element |
| sectionElement | div | string | - | Section element |
| sectionHeadingElement | button | string | - | Section heading component |
| sectionContentElement | div | string | - | Section content component |
| spacedSections | false | boolean | - | Sections are spaced instead of glued together |
| taxonomy | [] | array | - | Array of taxonomies such as tags |
| taxonomyPosition | string | - | Taxonomy position like top or below | |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |