Docs
Search the documentation
⌘K
EN
0.2.0-preview.61
Playground
GitHub
START HERE
Getting Started
ARCHITECTURE
Architecture Overview
Write-Once Components
Declarative Surface
Package Architecture
Components
Styling
Localization
Analytics & GTM
WRITE-ONCE
Photon Engine
Design System
Capabilities
Storage
Forms
Code Editor
Markdown
Mermaid
Email Rendering
COMPILATION
Compiler
Supported C# Features
External Type Resolution
Build Flow
Diagnostics
RUNTIME
Runtime (TypeScript)
Performance
SERVER
Server Integration
Server Events
Assets
BunPackage
Security
ECOSYSTEM
Image
Charts
Icons
Lottie
DEVELOPMENT
Visual Editor
Debug
Roadmap
Upgrading
ACTIONS & INPUTS
Button
IconButton
TextInput
Select
Checkbox
Switch
RadioGroup
SegmentedControl
Slider
Stepper
SearchField
SURFACES & DISPLAY
Card
Badge
Chip
Avatar
Banner
ProgressBar
EmptyState
Divider
NAVIGATION
Tabs
AppBar
BottomNavigation
Breadcrumb
Pagination
PageIndicator
Menu
Drawer
OVERLAYS
Dialog
BottomSheet
Toast
Popover
Tooltip
LISTS & DATA
List
ListView
Table
Accordion
CodeBlock
TOUCH INTERACTION
PullToRefresh
SwipeableRow
Docs
Lists & data
Accordion
View source
1 min read
Progressive disclosure: a header row that expands to reveal secondary content.
1
using
eQuantic
.
UI
.
Components
;
STATES
Section title
collapsed
Section title
The panel body.
expanded
Usage
1
2
3
4
5
new
Accordion
{
Items
=
[
new
AccordionItem
(
"What fees apply to transfers?"
)
{
Content
=
new
FeesAnswer
()
}
],
Multiple
=
false
,
}
API
Prop
Type
Default
Description
Multiple
bool
false
Allows several panels open at once;
false
closes the others.
Item.Content
VisualNode?
null
The revealed content.
States
State
Rendering
Collapsed
Chevron down, height zero
Expanded
Chevron rotated, height animates over
Motion.State
Pressed
Header wash
Accessibility
•
The header is a button carrying the expanded state; the content follows it in the focus order.
When to use
•
FAQs, breakdowns, optional detail.
Avoid
•
Hiding primary actions.
•
Nested accordions.
NOTE
Every dimension resolves through
Sizing.*(SizeVariant)
and the token scales — never a literal. Source:
src/eQuantic.UI.Components/Accordion.cs
.
PREVIOUS
Table
NEXT
CodeBlock
ON THIS PAGE
Usage
API
States
Accessibility
When to use
Avoid