Components/Surfaces/Accordion
COMPONENT03.05

Accordion

Stacked disclosure rows on native <details> — no JavaScript needed. Single or multiple open via <mo-accordion>.


INSTALL

1pnpm dlx @sayagodev/mo add accordion

Or copy the files manually and import them:

1import "@sayagodev/mo/css/accordion.css";2import "@sayagodev/mo/js/accordion.js";
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 at any time from your account settings. Changes will be reflected in your next billing cycle.

What payment methods do you accept?

We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.

Multiple
Notification Settings

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

Privacy & Security

Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.

Billing & Subscription

View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.

Borders
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?

Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.

What integrations do you support?

We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.

Disabled
Can I access my account history?

Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.

Premium feature information

This section contains information about premium features. Upgrade your plan to access this content.

How do I update my email address?

You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.

Inside a card

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 occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.

How do I cancel my subscription?

You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.

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

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

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

نعم، يمكنك ترقية خطتك أو تخفيضها في أي وقت من إعدادات حسابك. وستظهر التغييرات في دورة الفوترة التالية.

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

نقبل جميع بطاقات الائتمان الرئيسية وPayPal والتحويلات البنكية. وتُعالَج جميع المدفوعات بأمان عبر شركاء الدفع لدينا.

USAGE

1<mo-accordion type="single" collapsible>2  <details name="faq" open>3    <summary>What is design engineering?</summary>4    <div>5      Where design intuition meets code execution — enabling you6      to see UI problems and build solutions from the ground up.7    </div>8  </details>9  <details name="faq">10    <summary>What is the craft of UI?</summary>11    <div></div>12  </details>13</mo-accordion>

API REFERENCE

PROPERTIESTYPEDEFAULTDESCRIPTION
type"single" | "multiple""single"Determines whether one or multiple items can be opened at once.
collapsibleboolean (attribute)falseWhen type is 'single', allows closing the open item.
disabledon <details>falseDisables interaction with an individual item.
openon <details>The controlled value: an expanded item carries the open attribute.

THEMING · PLAYGROUND

The component from the examples above wearing a completely different theme. Edit tokens and --mo-* hooks — autocomplete knows them — and the preview obeys in real time.

Tokens & hooks — edit live
Global tokens
--accent--accent-foreground--background--border--card--destructive--foreground--muted--muted-foreground--radius--ring
Component hooks
--mo-accordion-padding

Preview

What ships in the box?

The chassis, a key, and this documentation.

Can I add modules later?

Yes — every module clips into the same rail.

Warranty?

Five years, including the hinges.

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.