Responsive
Atoms
FormLabel
Default
Molecules
ContactDetails
Default
Organisms
HeaderMinimal
Default
ServicesGroupFinderBlock
With Results No Results

Accordion / Many Items

Accordion with multiple items to test scrolling

Layout
Properties
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
Component Code
@await Html.PartialAsync("~/Components/Organisms/Accordion/Accordion.cshtml", new AccordionProps
{
"Title": "Common Questions",
"BackgroundColor": "bg-pink",
"Items": [
{
"Question": "Question one",
"Answer": "\u003Cp\u003EAnswer to question one.\u003C/p\u003E",
"IsExpanded": false
},
{
"Question": "Question two",
"Answer": "\u003Cp\u003EAnswer to question two.\u003C/p\u003E",
"IsExpanded": false
},
{
"Question": "Question three",
"Answer": "\u003Cp\u003EAnswer to question three.\u003C/p\u003E",
"IsExpanded": false
},
{
"Question": "Question four",
"Answer": "\u003Cp\u003EAnswer to question four.\u003C/p\u003E",
"IsExpanded": false
},
{
"Question": "Question five",
"Answer": "\u003Cp\u003EAnswer to question five.\u003C/p\u003E",
"IsExpanded": false
},
{
"Question": "Question six",
"Answer": "\u003Cp\u003EAnswer to question six.\u003C/p\u003E",
"IsExpanded": false
}
]
})
♿ Accessibility