Accordion (accordion)

An accordion is a list of headers that hide or reveal additional content when selected.

🔗 External documentation.

                        type: boolean

                      

                        type: boolean

                      

            id: accordion
label: Accordion
description: 'An accordion is a list of headers that hide or reveal additional content when selected.'
group: Accordion
homepage: 'https://designsystem.digital.gov/components/accordion/'
slots:
    content:
        id: content
        label: Content
        description: 'Accordion items.'
props:
    bordered:
        id: bordered
        label: Border
        description: 'Add bordered around accordion group.'
        schema:
            type: boolean
    multiselect:
        id: multiselect
        label: Multiselect
        description: 'Allow opening multiple accordions at once.'
        schema:
            type: boolean
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': accordion
            content:
                -
                    '@component': accordion_item
                    opened: true
                    title: 'Accordion Item #1'
                    content:
                        '@element': p
                        '@content': 'Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum.'
                -
                    '@component': accordion_item
                    title: 'Accordion Item #2'
                    content:
                        '@element': p
                        '@content': 'Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum.'
                -
                    '@component': accordion_item
                    title: 'Accordion Item #3'
                    content:
                        '@element': p
                        '@content': 'Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum.'
                -
                    '@component': accordion_item
                    title: 'Accordion Item #4'
                    content:
                        '@element': p
                        '@content': 'Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum.'
            multiselect: true