diff --git a/docs/documentation/docs/assets/accordion.png b/docs/documentation/docs/assets/accordion.png
new file mode 100644
index 000000000..5939115f6
Binary files /dev/null and b/docs/documentation/docs/assets/accordion.png differ
diff --git a/docs/documentation/docs/controls/Accordion.md b/docs/documentation/docs/controls/Accordion.md
new file mode 100644
index 000000000..57473c80d
--- /dev/null
+++ b/docs/documentation/docs/controls/Accordion.md
@@ -0,0 +1,44 @@
+# Accordion
+
+This control allows you to render an accordion control.
+
+Here is an example of the control in action:
+
+![Accordion control](../assets/accordion.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- In your component file, import the `Accordion` control as follows:
+
+```TypeScript
+import { Accordion } from "@pnp/spfx-controls-react/lib/Accordion";
+```
+
+- Use the `Accordion` control in your code as follows:
+
+```TypeScript
+{
+ sampleItems.map((item, index) => (
+
+
+
{item.Reponse}
+
{`Langue : ${item.Langue.Nom}`}
+
+
+ ))
+}
+```
+
+## Implementation
+
+The `Accordion` control can be configured with the following properties:
+
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| title | string | yes | The title in the accordion to display. | |
+| defaultCollapsed | boolean | no | Is the accordion by default collapsed? | false |
+| className | string | no | Additional class name to add to your accordion. | |
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Accordion)
diff --git a/docs/documentation/docs/index.md b/docs/documentation/docs/index.md
index a30861828..0b25a8499 100644
--- a/docs/documentation/docs/index.md
+++ b/docs/documentation/docs/index.md
@@ -49,6 +49,7 @@ telemetry.optOut();
The following controls are currently available:
+- [Accordion](./controls/Accordion) (Control to render an accordion)
- [Carousel](./controls/Carousel) (Control displays children elements with 'previous/next element' options)
- [Charts](./controls/ChartControl) (makes it easy to integrate [Chart.js](https://www.chartjs.org/) charts into web part)
- [ComboBoxListItemPicker](./controls/ComboBoxListItemPicker) (allows to select one or more items from a list)
diff --git a/docs/documentation/mkdocs.yml b/docs/documentation/mkdocs.yml
index 1b46b59a0..9b67e0085 100644
--- a/docs/documentation/mkdocs.yml
+++ b/docs/documentation/mkdocs.yml
@@ -2,6 +2,7 @@ site_name: '@pnp/spfx-controls-react'
nav:
- Home: 'index.md'
- Controls:
+ - Accordion: 'controls/Accordion.md'
- Carousel: 'controls/Carousel.md'
- Charts:
- "ChartControl": 'controls/ChartControl.md'
diff --git a/src/controls/accordion/Accordion.tsx b/src/controls/accordion/Accordion.tsx
index 261db1beb..9904b051c 100644
--- a/src/controls/accordion/Accordion.tsx
+++ b/src/controls/accordion/Accordion.tsx
@@ -4,6 +4,7 @@ import { IAccordionProps, IAccordionState } from './index';
import { css } from "@uifabric/utilities/lib/css";
import { DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
+import * as telemetry from '../../common/telemetry';
/**
* Icon styles. Feel free to change them
@@ -17,8 +18,10 @@ export class Accordion extends React.Component
super(props);
this.state = {
- expanded: props.defaultCollapsed == null ? false : !props.defaultCollapsed
+ expanded: props.defaultCollapsed === null ? false : !props.defaultCollapsed
};
+
+ telemetry.track('ReactAccordion', {});
}
public render(): React.ReactElement {