Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

What are your shipping options?

We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.

What is your return policy?

You can return items within 30 days of delivery. Items must be unused and in their original packaging.

How can I contact customer support?

Email support@example.com or use live chat during business hours.

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Accordion component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/accordion.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Include JavaScript

Copy or serve the full A3S UI JavaScript bundle.

<script src="/assets/js/all.min.js" defer></script>

Or copy or serve the A3S UI runtime and Accordion script.

<script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/accordion.min.js" defer></script>

Using CDN or bundler imports? See the Installation page.

Add your accordion HTML

<section class="accordion">
  <details open>
    <summary>
      Is it accessible?
      <svg class="lucide lucide-chevron-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
    </summary>
    <section>Yes. It uses native disclosure semantics.</section>
  </details>
</section>

A3S UI uses native <details> and <summary> elements for disclosure semantics. The accordion JavaScript only enforces single-item behavior by default and prevents disabled items from toggling. Add data-multiple to the root when more than one item can be open at a time.

HTML structure

<section class="accordion">

Root accordion container. Add data-multiple to allow multiple open items.

<details open>

Accordion item. Use the native open attribute for the default expanded item. Add aria-disabled="true" when an item should not toggle.

<summary>: Accordion trigger. Keep the trigger text visible and add an optional trailing icon.
<section>: Accordion content. Use any semantic element that fits your content.

JavaScript API

Accordion does not expose custom methods or events. Programmatically open or close an item with the native details.open boolean.

document.querySelector("#billing").open = true

Examples

Basic

A basic accordion that shows one item at a time. The first item is open by default.

How do I reset my password?

Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.

Can I change my subscription plan?

Yes. You can upgrade or downgrade your plan from the billing settings page.

What payment methods do you accept?

We accept all major credit cards, PayPal, and bank transfers for annual plans.

Multiple

Use data-multiple to allow multiple items to be open at the same time.

Notification Settings

Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.

Privacy & Security

Control account security, session history, and privacy preferences.

Billing & Subscription

Review invoices, change plans, and update payment methods.

Disabled

Use aria-disabled="true" on an item to disable it.

Can I access my account history?

Yes. Your account history is available from the activity page.

Premium feature information

This item is disabled.

How do I update my email address?

Go to account settings, update your email, then confirm the change from your inbox.

Borders

Add horizontal padding to the rows when using a bordered root.

How does billing work?

We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.

Is my data secure?

Data is encrypted in transit and at rest.

What integrations do you support?

We support Slack, GitHub, Google Workspace, and webhooks.

Card

Wrap the accordion in a card for grouped support or billing content.

Subscription & Billing

Common questions about your account, plans, payments and cancellations.

What subscription plans do you offer?

We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.

How does billing work?

Billing is charged at the beginning of each cycle.

How do I cancel my subscription?

Cancel from billing settings. Your plan remains active until the end of the current cycle.

RTL

Accordion spacing uses logical properties. Set dir="rtl" on the accordion or a parent element.

كيف يمكنني إعادة تعيين كلمة المرور؟

انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.

هل يمكنني تغيير خطة الاشتراك الخاصة بي؟

نعم، يمكنك تغيير الخطة من إعدادات الفوترة.

ما هي طرق الدفع التي تقبلونها؟

نقبل بطاقات الائتمان الرئيسية والتحويلات البنكية.

#Accordion

#Usage

Include CSS

Include JavaScript

Add your accordion HTML

#HTML structure

#JavaScript API

#Examples

#Basic

#Multiple

#Disabled

#Borders

#Card

#RTL