Accordion
Accordion
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="678b07649b2fa" data-uid="678b07649b309">
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-678b07649b2fa-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" material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b07649b45c">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-678b07649b2fa-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-678b07649b2fa-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" material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b07649b4cb">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-678b07649b2fa-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-678b07649b2fa-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" material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b07649b519">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-678b07649b2fa-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-678b07649b2fa-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" material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b07649b560">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-678b07649b2fa-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."]
]
]
)
@endaccordion
Using a slot
Giving you more flexibility
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="678b07649ba2b" data-uid="678b07649ba30">
<div class="c-accordion c-accordion__section" id="678b07649b86c" data-uid="678b07649b876"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-678b07649b86c" aria-expanded="false" js-expand-button href="#678b07649b86c">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h2 class="c-typography c-typography__variant--h4" data-uid="678b07649b8ea">
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" material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b07649b933">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-678b07649b86c" 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="678b07649b97a" data-uid="678b07649b97f"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-678b07649b97a" aria-expanded="false" js-expand-button href="#678b07649b97a">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="678b07649b9b5">
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" material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b07649b9ef">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-678b07649b97a" 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
@endaccordion
Blade 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 |
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. |