Skip to main content
Material
Components
CDK
Guides
9.2.4
arrow_drop_down
format_color_fill
GitHub
Components
CDK
Guides
menu
Expansion Panel
Form Controls
keyboard_arrow_up
Autocomplete
Checkbox
Datepicker
Form field
Input
Radio button
Select
Slider
Slide toggle
Navigation
keyboard_arrow_up
Menu
Sidenav
Toolbar
Layout
keyboard_arrow_up
Card
Divider
Expansion Panel
Grid list
List
Stepper
Tabs
Tree
Buttons & Indicators
keyboard_arrow_up
Button
Button toggle
Badge
Chips
Icon
Progress spinner
Progress bar
Ripples
Popups & Modals
keyboard_arrow_up
Bottom Sheet
Dialog
Snackbar
Tooltip
Data table
keyboard_arrow_up
Paginator
Sort header
Table
overview
api
examples
Examples for expansion
Accordion with expand/collapse all toggles
code
open_in_new
Expand All
Collapse All
Personal data
Type your name and age
account_circle
First name
Age
Destination
Type the country name
map
Country
Day of the trip
Inform the date you wish to travel
date_range
Date
Basic expansion panel
code
open_in_new
Personal data
Type your name and age
First name
Age
Self aware panel
Currently I am closed
I'm visible because I am open
Expansion panel as accordion
code
open_in_new
Personal data
Type your name and age
account_circle
First name
Age
Next
Destination
Type the country name
map
Country
Previous
Next
Day of the trip
Inform the date you wish to travel
date_range
Date
Previous
End
Select a version of the documentation
Select a theme for the documentation
View code
Edit Accordion with expand/collapse all toggles example in StackBlitz
Edit Basic expansion panel example in StackBlitz
Edit Expansion panel as accordion example in StackBlitz