Accordion
Accordion
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="6811cc4c382bb" data-uid="6811cc4c382cb">
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-6811cc4c382bb-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="6811cc4c383ef">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-6811cc4c382bb-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-6811cc4c382bb-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="6811cc4c38452">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-6811cc4c382bb-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-6811cc4c382bb-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="6811cc4c3849d">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-6811cc4c382bb-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-6811cc4c382bb-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="6811cc4c384ed">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-6811cc4c382bb-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="6811cc4c38724" data-uid="6811cc4c38729">
<div class="c-accordion c-accordion__section" id="6811cc4c38595" data-uid="6811cc4c3859d"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-6811cc4c38595" aria-expanded="false" js-expand-button href="#6811cc4c38595">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h2 class="c-typography c-typography__variant--h4" data-uid="6811cc4c38606">
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="6811cc4c38644">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-6811cc4c38595" 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="6811cc4c38681" data-uid="6811cc4c38686"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-6811cc4c38681" aria-expanded="false" js-expand-button href="#6811cc4c38681">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6811cc4c386b7">
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="6811cc4c386ec">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-6811cc4c38681" 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
Warning: The parameter "spacedSections" is not recognized in the component "accordion" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 244
<br />
<b>Warning</b>: The parameter <b>"spacedSections"</b> is not recognized in the component <b>"accordion"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>244</b><br />
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="6811cc4c3879a" data-uid="6811cc4c3879f">
<div class="c-accordion__section">
<button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-6811cc4c3879a-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="6811cc4c387db">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-6811cc4c3879a-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-6811cc4c3879a-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="6811cc4c38820">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-6811cc4c3879a-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-6811cc4c3879a-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="6811cc4c3885f">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-6811cc4c3879a-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-6811cc4c3879a-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="6811cc4c388c4">
</span>
</span>
</button>
<div class="c-accordion__content" id="c-accordion__aria-6811cc4c3879a-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 |
| 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. |