Accordion
Accordion
The accordion can be used to display larger lists of content on one page.
<!-- accordion.blade.php -->
<div id="62bed290b02e2" class="c-accordion" js-expand-container data-uid="62bed290b02ec">
<div class="c-accordion__section" aria-label="Your heading">
<button class="c-accordion__button" role="button" aria-controls="c-accordion__aria-62bed290b02e2-0" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<i id="62bed290b084e" class="c-icon c-accordion__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed290b0848">
keyboard_arrow_down
</i>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-62bed290b02e2-0" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="c-accordion__section" aria-label="Your heading">
<button class="c-accordion__button" role="button" aria-controls="c-accordion__aria-62bed290b02e2-1" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<i id="62bed290b08b6" class="c-icon c-accordion__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed290b08b3">
keyboard_arrow_down
</i>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-62bed290b02e2-1" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="c-accordion__section" aria-label="Your heading">
<button class="c-accordion__button" role="button" aria-controls="c-accordion__aria-62bed290b02e2-2" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<i id="62bed290b08f2" class="c-icon c-accordion__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed290b08f0">
keyboard_arrow_down
</i>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-62bed290b02e2-2" aria-hidden="true">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="c-accordion__section" aria-label="Your heading">
<button class="c-accordion__button" role="button" aria-controls="c-accordion__aria-62bed290b02e2-3" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper" tabindex="-1">
Your heading
<!-- icon.blade.php -->
<i id="62bed290b0928" class="c-icon c-accordion__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed290b0926">
keyboard_arrow_down
</i>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-62bed290b02e2-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
The accordion will see if you're using the slot. In this example we're using the sub component accordion item to fill the accordion with items
<!-- accordion.blade.php -->
<div id="62bed290b1546" class="c-accordion" js-expand-container data-uid="62bed290b154c">
<div class="c-accordion c-accordion__section" data-uid="62bed290b0f64" aria-label="First item">
<button class="c-accordion__button" aria-controls="c-accordion__aria-62bed290b0f57" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper " tabindex="-1">
First item
<!-- icon.blade.php -->
<i id="62bed290b141b" class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed290b1416">
keyboard_arrow_down
</i>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-62bed290b0f57" 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" data-uid="62bed290b147f" aria-label="Second Item">
<button class="c-accordion__button" aria-controls="c-accordion__aria-62bed290b147a" aria-expanded="false" js-expand-button>
<span class="c-accordion__button-wrapper " tabindex="-1">
Second Item
<!-- icon.blade.php -->
<i id="62bed290b1509" class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed290b1505">
keyboard_arrow_down
</i>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-62bed290b147a" 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. |