Accordion
Divide content into collapsible sections
Theme
<sa-accordion>
<sa-accordion-item>
<sa-accordion-item-title>
What payment methods do you accept?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
<sa-accordion-item>
<sa-accordion-item-title>
When will I receive my booking confirmation?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
<sa-accordion-item>
<sa-accordion-item-title>
Can I earn loyalty points or frequent flyer miles?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
</sa-accordion>Usage
Use <sa-accordion> to wrap a collection of accordion items. Individual items are created using the <sa-accordion-item> element containing <sa-accordion-item-title> and <sa-accordion-item-content> which contains the title and content respectively.
<sa-accordion>
<sa-accordion-item>
<sa-accordion-item-title>
...
</sa-accordion-item-title>
<sa-accordion-item-content>
...
</sa-accordion-item-content>
</sa-accordion-item>
<sa-accordion-item>
...
</sa-accordion-item>
</sa-accordion>Examples
Single open item
The name attribute of <sa-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 <sa-accordion-item> uses.
Theme
<sa-accordion>
<sa-accordion-item name="faq">
<sa-accordion-item-title>
What payment methods do you accept?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
<sa-accordion-item name="faq">
<sa-accordion-item-title>
When will I receive my booking confirmation?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
<sa-accordion-item name="faq">
<sa-accordion-item-title>
Can I earn loyalty points or frequent flyer miles?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
</sa-accordion>Default open
Add the open attribute to an accordion item to open it by default.
Theme
<sa-accordion>
<sa-accordion-item open>
<sa-accordion-item-title>
What payment methods do you accept?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
<sa-accordion-item>
<sa-accordion-item-title>
When will I receive my booking confirmation?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
<sa-accordion-item>
<sa-accordion-item-title>
Can I earn loyalty points or frequent flyer miles?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
</sa-accordion>Disabled
Disable accordion items using the disabled attribute.
Theme
<sa-accordion>
<sa-accordion-item>
<sa-accordion-item-title>
What payment methods do you accept?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
<sa-accordion-item disabled>
<sa-accordion-item-title>
When will I receive my booking confirmation?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
<sa-accordion-item>
<sa-accordion-item-title>
Can I earn loyalty points or frequent flyer miles?
</sa-accordion-item-title>
<sa-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.
</sa-accordion-item-content>
</sa-accordion-item>
</sa-accordion>API Reference
<sa-accordion>
Renders a <div> element that wraps the accordion items.
<sa-accordion-item>
Renders a <details> element. Native <details> attributes such as name and open work as usual, and adding disabled renders the item as disabled.
<sa-accordion-item-title>
Renders a <summary> element and appends a chevron indicator icon after the title content.
<sa-accordion-item-content>
Renders a <div> element containing an inner content wrapper.