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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Accordion/accordion.json