Accordion

An accordion that keeps one item open at a time, as uikit:Accordion.

<uikit:Accordion Width="360" HorizontalAlignment="Left">
  <Expander Header="Is it accessible?" Content="Yes. It adheres to the WAI-ARIA design pattern." IsExpanded="True" />
  <Expander Header="Is it styled?" Content="Yes. It comes with default styles that match the other components." />
  <Expander Header="Is it animated?" Content="Yes. Opening one item closes the others, each on a spring." />
</uikit:Accordion>

#Usage

uikit:Accordion holds the Expanders itself, in the look of the Accordion: it draws the same separators and card (IsBordered="False" leaves the card out) and keeps one item open at a time. Opening an item, by a click or in code, closes the others, each on the spring; Multiple="True" lets items open independently. A click on a title raises ToggleClick with OpenIndices, the items open after it. Its size classes (xsmall, small, large) go on every item, and IsEnabled="False" disables them.

#Examples

Multiple="True" and IsBordered="False", at small.

<uikit:Accordion Classes="small" Multiple="True" IsBordered="False" Width="360" HorizontalAlignment="Left">
  <Expander Header="Shipping" Content="Free over $50, two to four days." IsExpanded="True" />
  <Expander Header="Returns" Content="Within 30 days, in the original box." IsExpanded="True" />
  <Expander Header="Warranty" Content="One year on parts and labour." />
</uikit:Accordion>