DuneUI

<dui-accordion>
    <dui-accordion-item>
        <dui-accordion-item-title>
            What payment methods do you accept?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            We accept all major credit and debit cards (Visa, Mastercard, Amex) and popular digital wallets like Apple
            Pay and Google Pay for your convenience.
        </dui-accordion-item-content>
    </dui-accordion-item>
    <dui-accordion-item>
        <dui-accordion-item-title>
            When will I receive my booking confirmation?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            Your confirmation and e-tickets are usually emailed within minutes. If not, please check your spam folder or
            view the details in your account's "My Trips" section.
        </dui-accordion-item-content>
    </dui-accordion-item>
    <dui-accordion-item>
        <dui-accordion-item-title>
            Can I earn loyalty points or frequent flyer miles?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            Yes, you can enter your frequent flyer number during flight booking. For hotels and packages, eligibility
            depends on the specific service provider's loyalty program rules.
        </dui-accordion-item-content>
    </dui-accordion-item>
</dui-accordion>

Usage

Use dui-accordion to wrap a collection of accordion items. Individual items are created using the dui-accordion-item element containing dui-accordion-item-title and dui-accordion-item-content which contains the title and content respectively.

<dui-accordion>
    <dui-accordion-item>
        <dui-accordion-item-title>
            ...
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            ...
        </dui-accordion-item-content>
    </dui-accordion-item>
    <dui-accordion-item>
        ...
    </dui-accordion-item>
</dui-accordion>

Examples

Single open item

The name attribute of dui-accordion-item allows you to link multiple accordion items to a single group. When they are connected in this manner, only a single item can be opened at a time.

This behavior is managed by the <details> HTML element, which dui-accordion-item uses.

<dui-accordion>
    <dui-accordion-item name="faq">
        <dui-accordion-item-title>
            What payment methods do you accept?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            We accept all major credit and debit cards (Visa, Mastercard, Amex) and popular digital wallets like Apple
            Pay and Google Pay for your convenience.
        </dui-accordion-item-content>
    </dui-accordion-item>
    <dui-accordion-item name="faq">
        <dui-accordion-item-title>
            When will I receive my booking confirmation?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            Your confirmation and e-tickets are usually emailed within minutes. If not, please check your spam folder or
            view the details in your account's "My Trips" section.
        </dui-accordion-item-content>
    </dui-accordion-item>
    <dui-accordion-item name="faq">
        <dui-accordion-item-title>
            Can I earn loyalty points or frequent flyer miles?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            Yes, you can enter your frequent flyer number during flight booking. For hotels and packages, eligibility
            depends on the specific service provider's loyalty program rules.
        </dui-accordion-item-content>
    </dui-accordion-item>
</dui-accordion>

Default open

Add the open attribute to an accordion item to open it by default.

<dui-accordion>
    <dui-accordion-item open>
        <dui-accordion-item-title>
            What payment methods do you accept?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            We accept all major credit and debit cards (Visa, Mastercard, Amex) and popular digital wallets like Apple
            Pay and Google Pay for your convenience.
        </dui-accordion-item-content>
    </dui-accordion-item>
    <dui-accordion-item>
        <dui-accordion-item-title>
            When will I receive my booking confirmation?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            Your confirmation and e-tickets are usually emailed within minutes. If not, please check your spam folder or
            view the details in your account's "My Trips" section.
        </dui-accordion-item-content>
    </dui-accordion-item>
    <dui-accordion-item>
        <dui-accordion-item-title>
            Can I earn loyalty points or frequent flyer miles?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            Yes, you can enter your frequent flyer number during flight booking. For hotels and packages, eligibility
            depends on the specific service provider's loyalty program rules.
        </dui-accordion-item-content>
    </dui-accordion-item>
</dui-accordion>

Disabled

Disable accordion items using the disabled attribute.

<dui-accordion>
    <dui-accordion-item>
        <dui-accordion-item-title>
            What payment methods do you accept?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            We accept all major credit and debit cards (Visa, Mastercard, Amex) and popular digital wallets like Apple
            Pay and Google Pay for your convenience.
        </dui-accordion-item-content>
    </dui-accordion-item>
    <dui-accordion-item disabled>
        <dui-accordion-item-title>
            When will I receive my booking confirmation?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            Your confirmation and e-tickets are usually emailed within minutes. If not, please check your spam folder or
            view the details in your account's "My Trips" section.
        </dui-accordion-item-content>
    </dui-accordion-item>
    <dui-accordion-item>
        <dui-accordion-item-title>
            Can I earn loyalty points or frequent flyer miles?
        </dui-accordion-item-title>
        <dui-accordion-item-content>
            Yes, you can enter your frequent flyer number during flight booking. For hotels and packages, eligibility
            depends on the specific service provider's loyalty program rules.
        </dui-accordion-item-content>
    </dui-accordion-item>
</dui-accordion>

API Reference

`<dui-accordion>`

The <dui-accordion> tag helper renders a <div> element that wraps the accordion items. It has no attributes of its own, but forwards any global HTML attributes (such as class or id) to the rendered element.

`<dui-accordion-item>`

The <dui-accordion-item> tag helper renders a <details> element. It has no attributes of its own, but forwards any standard <details> attributes (such as name or open) to the rendered element; adding a disabled attribute renders the item as disabled.

`<dui-accordion-item-title>`

The <dui-accordion-item-title> tag helper renders a <summary> element and appends a chevron indicator icon after the title content. It has no attributes of its own, but forwards any global HTML attributes to the rendered element.

`<dui-accordion-item-content>`

The <dui-accordion-item-content> tag helper renders a <div> element containing an inner content wrapper. It has no attributes of its own, but forwards any global HTML attributes to the rendered element.

Accordion