Accordion

Accordion 

<!-- accordion.blade.php -->
    <div class="c-accordion" js-expand-container id="662d27c65a6be" data-uid="662d27c65a6d9">
                    <div class="c-accordion__section">

                <button class="c-accordion__button" role="button" aria-label="Your heading" aria-controls="c-accordion__aria-662d27c65a6be-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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="keyboard_arrow_down" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662d27c65a75f">
            </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-662d27c65a6be-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-662d27c65a6be-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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="keyboard_arrow_down" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662d27c65a7aa">
            </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-662d27c65a6be-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-662d27c65a6be-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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="keyboard_arrow_down" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662d27c65a7e6">
            </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-662d27c65a6be-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-662d27c65a6be-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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="keyboard_arrow_down" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662d27c65a81f">
            </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-662d27c65a6be-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="662d27c65aa5e" data-uid="662d27c65aa63">
        <div class="c-accordion c-accordion__section" id="662d27c65a8c0" data-uid="662d27c65a8c8"">
    <a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-662d27c65a8c0" aria-expanded="false" js-expand-button href="#662d27c65a8c0">
        <div class="c-accordion__button-wrapper  " tabindex="-1">
            
            
            
                            <!-- typography.blade.php   original: h3 -->
<h2 class="c-typography c-typography__variant--h4" data-uid="662d27c65a93a">
    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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="keyboard_arrow_down" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662d27c65a984">
            </span>
        </div>

        </a>

            <div class="c-accordion__content" id="c-accordion__aria-662d27c65a8c0" 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="662d27c65a9c8" data-uid="662d27c65a9cd"">
    <a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-662d27c65a9c8" aria-expanded="false" js-expand-button href="#662d27c65a9c8">
        <div class="c-accordion__button-wrapper  " tabindex="-1">
            
            
            
                            <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="662d27c65a9fb">
    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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="keyboard_arrow_down" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662d27c65aa2e">
            </span>
        </div>

        </a>

            <div class="c-accordion__content" id="c-accordion__aria-662d27c65a9c8" 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