# SaaAccordion

![](https://3593808699-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeLJp7jLxK-XmIvfxh3%2F-Mf9Mja0xL0uqWahR3jG%2F-Mf9NbmbOrAcrGvYKAAf%2Fimage.png?alt=media\&token=01aad853-9d32-4b79-abd1-0932ab510c5e)

SaaAccordion is collapsible container that you can use to organize your items or controls. It collapses or expands when the head is clicked.

## 1. Colors

`BodyColor` tells the background color of the body.

`BackColor` tells the overall background color of the accordion. By default it is transparent.

`HeadBackColor` tells the background color of the head.

`HeadHoverBackColor` tells background color of the head when the mouse pointer is over the head.

`HeadTextColor`  tells the text color of the head.

## 2. Size

`Size` tells the overall height and width of the accordion.

`BodyMargin` tells the distance between the body and the edges of the accordion.

`BodyPadding` tells the distance between the body and its contents.

`HeadOffSet` tells how far the head should move from left (X) and top (Y).

`HeadOffSize` tells extra height and width to  add to the head.

`HeadSize` tells the height and width of the head.

## 3. Images

`HeadLeftImage` tells the image displayed on left side of the head.

`HeadLeftImageSizeMode` tells the sizing of mode of the `HeadLeftImage`.

`HeadLeftImageVisible` tells whether the image displayed on the left side of the head will be shown. 

`HeadRighImage` tells the image displayed on right side of the head.

`HeadRightImageSizeMode` tells the sizing of mode of the `HeadRightImage`.

`HeadRightImageVisible` tells whether the image displayed on the right side of the head will be shown. 

## 4. Text

`HeadFont` tells the font of the text displayed on the head.

`HeadText` tells the text displayed on the head.

`HeadTextPosition` tells the position of the `HeadText`.

## 5. Radius

`BodyRadius` tells the radius or the roundness of the body.

`HeadCollapsedRadius` tells the radius of the head when it is collapsed.

`HeadExpandedRadius` tells the radius of the head when it is expanded.

## 6. Shadow

`HeadShadow` gets the shadow of the head. `HeadShadow` is type of `SaaShadow`. For more about `HeadShadow` see [`SaaShadow`](https://docs.saabytes.com/controls/saashadow).

## 7. Animations

`IntervalInMilliseconds` tells in milliseconds, the interval between two increments or decrements during animations.

`Speed` tells how fast the accordion collapses or expands. '0'  means default animation.

## 8. Behavior

`Expand` tells whether the accordion is collapsed or expanded. `true` means expanded while `false` means collapsed.

`MouseClicks` tells which mouse button click does the accordion accepts and can cause it to expand or collapse.

## 9. Events

`Animating` fires as the accordion is expanding or collapsing.

{% hint style="info" %}
`Animating` fires several times each expand or collapse depending on the interval and the speed.
{% endhint %}

`ExpandChanged` fires after the accordion is expanded or collapsed.

`ExpandChanging` fires before the accordion starts expanding or collapsing.

`HeadHover` fires when the mouse pointer is over the head.

`HeadHoverLeave` fires when the mouse pointer leaves the head.