accordion
Use an accessibly named section around native details elements. Give
sibling items the same name when opening one item should close the others.
The semantic structure needs no component class.
<section aria-label="Sections">
<details name="sections" open>
<summary>Section 1</summary>
<div>Content for section 1</div>
</details>
</section>
Omit name to allow more than one section to remain open.
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Accordion</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak data-example="accordion-demo">
<section class="visual-example" aria-label="Shipping questions">
<details name="shipping-questions" open>
<summary>What are your shipping options?</summary>
<div>
We offer standard (5-7 days), express (2-3 days), and overnight
shipping. Free shipping on international orders.
</div>
</details>
<details name="shipping-questions">
<summary>What is your return policy?</summary>
<div>
Returns are accepted within 30 days. Items must be unused and in their
original packaging.
</div>
</details>
<details name="shipping-questions">
<summary>How can I contact customer support?</summary>
<div>Reach us by email, live chat, or phone during business hours.</div>
</details>
</section>
</body>
</html>
State Variants
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Accordion State Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
data-example="accordion-basic accordion-disabled accordion-multiple"
>
<main class="accordion-workflow-grid">
<section
class="accordion-workflow-section"
aria-labelledby="accordion-basic-title"
>
<h2 id="accordion-basic-title">Account help</h2>
<section aria-label="Account help questions">
<details name="account-help" open>
<summary>How do I reset my password?</summary>
<div>
Click Forgot Password on the login page, enter your email address,
and we'll send you a reset link that expires in 24 hours.
</div>
</details>
<details name="account-help">
<summary>Can I change my subscription plan?</summary>
<div>
You can upgrade or downgrade your plan at any time from your
account settings.
</div>
</details>
<details name="account-help">
<summary>What payment methods do you accept?</summary>
<div>We accept major credit cards, PayPal, and bank transfers.</div>
</details>
</section>
</section>
<section
class="accordion-workflow-section"
aria-labelledby="accordion-disabled-title"
>
<h2 id="accordion-disabled-title">Availability</h2>
<section aria-label="Feature availability questions">
<details name="availability">
<summary>Can I access my account history?</summary>
<div>
Your complete account history is available from the dashboard.
</div>
</details>
<details name="availability" inert>
<summary>Premium feature information</summary>
<div>Upgrade your plan to access premium feature information.</div>
</details>
<details name="availability">
<summary>How do I update my email address?</summary>
<div>
Update it in account settings and confirm the verification email.
</div>
</details>
</section>
</section>
<section
class="accordion-workflow-section accordion-workflow-wide"
aria-labelledby="accordion-multiple-title"
>
<h2 id="accordion-multiple-title">Settings</h2>
<section aria-label="Settings questions">
<details open>
<summary>Notification Settings</summary>
<div>
Choose email alerts or push notifications for mobile devices.
</div>
</details>
<details>
<summary>Privacy & Security</summary>
<div>
Enable two-factor authentication, review active sessions, and
configure data sharing.
</div>
</details>
<details>
<summary>Billing & Subscription</summary>
<div>View your plan, payment history, and upcoming invoices.</div>
</details>
</section>
</section>
</main>
</body>
</html>
Layout Variants
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Accordion Layout Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
data-example="accordion-borders accordion-card accordion-rtl"
>
<main class="accordion-workflow-grid accordion-layout-workflows">
<section
class="accordion-workflow-section"
aria-labelledby="accordion-borders-title"
>
<h2 id="accordion-borders-title">Billing questions</h2>
<section class="accordion-bordered" aria-label="Billing questions">
<details name="billing" open>
<summary>How does billing work?</summary>
<div>
Billing is charged at the beginning of each monthly or annual
cycle, and you can cancel anytime.
</div>
</details>
<details name="billing">
<summary>Is my data secure?</summary>
<div>
Data is encrypted at rest and in transit using industry-standard
protocols.
</div>
</details>
<details name="billing">
<summary>What integrations do you support?</summary>
<div>
Connect popular tools or build custom integrations with our API.
</div>
</details>
</section>
</section>
<article
class="accordion-card-demo card"
aria-labelledby="accordion-card-title"
>
<header>
<h2 id="accordion-card-title">Subscription & Billing</h2>
<p>Common questions about plans, payments, and cancellations.</p>
</header>
<section>
<section aria-label="Subscription and billing questions">
<details name="subscription" open>
<summary>What subscription plans do you offer?</summary>
<div>
Choose Starter, Professional, or Enterprise based on storage,
API, and support needs.
</div>
</details>
<details name="subscription">
<summary>How does billing work?</summary>
<div>
Billing occurs automatically at the start of each cycle.
</div>
</details>
<details name="subscription">
<summary>How do I cancel my subscription?</summary>
<div>
Cancel from account settings with access through the current
billing period.
</div>
</details>
</section>
</section>
</article>
<section
class="accordion-workflow-section accordion-workflow-wide"
dir="rtl"
lang="ar"
aria-labelledby="accordion-rtl-title"
>
<h2 id="accordion-rtl-title">الأسئلة الشائعة</h2>
<section aria-label="الأسئلة الشائعة">
<details name="arabic-faq" open>
<summary>كيف يمكنني إعادة تعيين كلمة المرور؟</summary>
<div>
انقر على نسيت كلمة المرور في صفحة تسجيل الدخول، وسنرسل لك رابطًا
لإعادة تعيينها.
</div>
</details>
<details name="arabic-faq">
<summary>هل يمكنني تغيير خطة الاشتراك الخاصة بي؟</summary>
<div>يمكنك ترقية خطتك أو تخفيضها في أي وقت من إعدادات الحساب.</div>
</details>
<details name="arabic-faq">
<summary>ما هي طرق الدفع التي تقبلونها؟</summary>
<div>نقبل بطاقات الائتمان وPayPal والتحويلات المصرفية.</div>
</details>
</section>
</section>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Named native details disclosures.
Anatomy
Root styling selector
section[aria-label]:has(> details)
Semantic structure
Use an accessibly named section around direct details children. Each item requires a direct summary followed by authored content. Apply the same name to sibling details for exclusive disclosure.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
inert | Authored | Prevents interaction while the component is hidden. |
name | Authored | Authored HTML attribute or styling hook. |
open | Authored | Initial or controlled open state. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Native details and summary own disclosure, focus, and keyboard behavior. Give sibling details the same name for an exclusive accordion, or omit name when several panels may remain open. AngularCSS registers no accordion directive.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Use a direct summary as the accessible trigger for each details item. The browser exposes disclosure state and keyboard activation. Use inert only when an entire unavailable disclosure must be removed from interaction.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.