Accordion (accordion)

Render content in a box that expands and collapses vertically.

🔗 External documentation.

                        type: boolean

                      

                        type: string

                      

            id: accordion
label: Accordion
description: 'Render content in a box that expands and collapses vertically.'
group: Accordion
homepage: 'https://getbootstrap.com/docs/5.3/components/accordion/'
variants:
    default:
        id: default
        label: Default
    flush:
        id: flush
        label: Flush
        description: 'Remove the default background color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.'
slots:
    content:
        id: content
        label: Content
        description: 'Accordion items.'
props:
    keep_open:
        id: keep_open
        label: 'Keep open?'
        description: 'Make accordion items stay open when another item is opened.'
        schema:
            type: boolean
    accordion_id:
        id: accordion_id
        label: ID
        description: 'Must start with a letter. Randomly generated if empty.'
        schema:
            type: string
library:
    js:
        'https://data.dilla.io/bootstrap_5/components/accordion/js/accordion.js': {  }
    dependencies:
        - drupal
        - once
    id: accordion
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.'