Accordion

Accordion

The accordion can be used to display larger lists of content on one page. 

<!-- accordion.blade.php -->
    <div id="61efb097e8af4" class="c-accordion" js-expand-container data-uid="61efb097e8b02">
            <div class="c-accordion__section" aria-label="Your heading">

        <button class="c-accordion__button" role="button" aria-controls="c-accordion__aria-61efb097e8af4-0" aria-expanded="false" js-expand-button>
        <span class="c-accordion__button-wrapper" tabindex="-1">
                

            Your heading
            
            

                <!-- icon.blade.php -->
    <i id="61efb097e9115" class="c-icon c-accordion__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb097e910f">
                    keyboard_arrow_down
            </i>
            </span>
        </button>

        <div class="c-accordion__content" id="c-accordion__aria-61efb097e8af4-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-61efb097e8af4-1" aria-expanded="false" js-expand-button>
        <span class="c-accordion__button-wrapper" tabindex="-1">
                

            Your heading
            
            

                <!-- icon.blade.php -->
    <i id="61efb097e918e" class="c-icon c-accordion__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb097e9189">
                    keyboard_arrow_down
            </i>
            </span>
        </button>

        <div class="c-accordion__content" id="c-accordion__aria-61efb097e8af4-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-61efb097e8af4-2" aria-expanded="false" js-expand-button>
        <span class="c-accordion__button-wrapper" tabindex="-1">
                

            Your heading
            
            

                <!-- icon.blade.php -->
    <i id="61efb097e91e1" class="c-icon c-accordion__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb097e91dd">
                    keyboard_arrow_down
            </i>
            </span>
        </button>

        <div class="c-accordion__content" id="c-accordion__aria-61efb097e8af4-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-61efb097e8af4-3" aria-expanded="false" js-expand-button>
        <span class="c-accordion__button-wrapper" tabindex="-1">
                

            Your heading
            
            

                <!-- icon.blade.php -->
    <i id="61efb097e922f" class="c-icon c-accordion__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb097e922b">
                    keyboard_arrow_down
            </i>
            </span>
        </button>

        <div class="c-accordion__content" id="c-accordion__aria-61efb097e8af4-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="61efb097ea130" class="c-accordion" js-expand-container data-uid="61efb097ea137">
        <div class="c-accordion c-accordion__section" data-uid="61efb097e9a8b" aria-label="First item">
    <button class="c-accordion__button" aria-controls="c-accordion__aria-61efb097e9a80" aria-expanded="false" js-expand-button>
        <span class="c-accordion__button-wrapper  " tabindex="-1">
            
            
            
                            First item
                        
            
            

            <!-- icon.blade.php -->
    <i id="61efb097e9fd5" class="c-icon c-accordion__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb097e9fce">
                    keyboard_arrow_down
            </i>
        </span>

        </button>

            <div class="c-accordion__content" id="c-accordion__aria-61efb097e9a80" 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="61efb097ea045" aria-label="Second Item">
    <button class="c-accordion__button" aria-controls="c-accordion__aria-61efb097ea03f" aria-expanded="false" js-expand-button>
        <span class="c-accordion__button-wrapper  " tabindex="-1">
            
            
            
                            Second Item
                        
            
            

            <!-- icon.blade.php -->
    <i id="61efb097ea0e0" class="c-icon c-accordion__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb097ea0dc">
                    keyboard_arrow_down
            </i>
        </span>

        </button>

            <div class="c-accordion__content" id="c-accordion__aria-61efb097ea03f" 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: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Accordion/accordion.json