Deprecated: Return type of Illuminate\Support\Collection::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2060

Deprecated: Return type of Illuminate\Support\Collection::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2071

Deprecated: Return type of Illuminate\Support\Collection::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2083

Deprecated: Return type of Illuminate\Support\Collection::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2098

Deprecated: Return type of Illuminate\Support\Collection::count() should either be compatible with Countable::count(): int, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2007

Deprecated: Return type of Illuminate\Support\Collection::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 1986

Deprecated: Return type of Illuminate\Support\Collection::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 1955
Helsingborg Styleguide - Version 2.0

Accordion

Accordion 

<!-- accordion.blade.php -->
    <div class="c-accordion" js-expand-container id="67f63ae3eab1f" data-uid="67f63ae3eab2c">
                    <div class="c-accordion__section">

                <button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-67f63ae3eab1f-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="67f63ae3ead7d">
                    </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-67f63ae3eab1f-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-67f63ae3eab1f-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="67f63ae3eade5">
                    </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-67f63ae3eab1f-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-67f63ae3eab1f-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="67f63ae3eae32">
                    </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-67f63ae3eab1f-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-67f63ae3eab1f-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="67f63ae3eae78">
                    </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-67f63ae3eab1f-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="67f63ae3eb389" data-uid="67f63ae3eb38e">
        <div class="c-accordion c-accordion__section" id="67f63ae3eb0d4" data-uid="67f63ae3eb0de"">
    <a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-67f63ae3eb0d4" aria-expanded="false" js-expand-button href="#67f63ae3eb0d4">
        <div class="c-accordion__button-wrapper  " tabindex="-1">
            
            
            
                            <!-- typography.blade.php   original: h3 -->
<h2 class="c-typography c-typography__variant--h4" data-uid="67f63ae3eb239">
    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="67f63ae3eb28a">
                    </span>
        </div>

        </a>

            <div class="c-accordion__content" id="c-accordion__aria-67f63ae3eb0d4" 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="67f63ae3eb2d4" data-uid="67f63ae3eb2da"">
    <a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-67f63ae3eb2d4" aria-expanded="false" js-expand-button href="#67f63ae3eb2d4">
        <div class="c-accordion__button-wrapper  " tabindex="-1">
            
            
            
                            <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="67f63ae3eb311">
    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="67f63ae3eb34c">
                    </span>
        </div>

        </a>

            <div class="c-accordion__content" id="c-accordion__aria-67f63ae3eb2d4" 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.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Accordion/accordion.json