(Accordion item) (accordion_item)

Internal: to be used in the 'Accordion' component.

🔗 External documentation.

ID Label Description Schema
title Title Item title.
content Content Accordion item content.
opened Opened If the accordion item is opened by default.
                        type: boolean

                      
heading_level Heading level
                        type: integer
enum:
    - 2
    - 3
    - 4
    - 5
    - 6

                      
item_id ID Must start with a letter. Randomly generated if empty.
                        type: string

                      
            id: accordion_item
label: '(Accordion item)'
description: "Internal: to be used in the 'Accordion' component."
group: Accordion
homepage: 'https://getbootstrap.com/docs/5.3/components/accordion'
slots:
    title:
        id: title
        label: Title
        description: 'Item title.'
    content:
        id: content
        label: Content
        description: 'Accordion item content.'
props:
    opened:
        id: opened
        label: Opened
        description: 'If the accordion item is opened by default.'
        schema:
            type: boolean
    heading_level:
        id: heading_level
        label: 'Heading level'
        schema:
            type: integer
            enum:
                - 2
                - 3
                - 4
                - 5
                - 6
    item_id:
        id: item_id
        label: ID
        description: 'Must start with a letter. Randomly generated if empty.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': accordion_item
            title: 'Item title'
            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.'
            opened: true
            heading_level: 2

          

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.

<div class="accordion-item"> <h2 class="accordion-header" id="heading--accordion-item--1262087366"> <button aria-controls="accordion-item--1262087366" aria-expanded="true" class="accordion-button" data-bs-target="#accordion-item--1262087366" data-bs-toggle="collapse" type="button"> Item title </button> </h2> <div aria-labelledby="heading--accordion-item--1262087366" class="accordion-collapse collapse js-accordion-keep-open show" id="accordion-item--1262087366"> <div class="accordion-body"> <p>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.</p></div> </div> </div>