Accordion
Divide content into collapsible sections
<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>