Add Accordion control from https://github.com/hugoabernier/AccordionWebPart

src/Accordion.ts

@@ -0,0 +1 @@
+export * from "./controls/accordion/index";

src/controls/accordion/Accordion.module.scss

@@ -0,0 +1,49 @@
+@import "~office-ui-fabric-react/dist/sass/References.scss";
+
+.accordion {
+  background: #fafafa;
+
+  & > button {
+    min-height: 44px;
+    border: 2px solid transparent;
+    outline: 1px solid transparent;
+    outline-offset: -3px;
+    background: #f0f0f0; // Microsoft web site doesn't use Fabric colors!
+    color: rgba(0, 0, 0, 0.8); // Microsoft web site doesn't use Fabric colors!
+    text-align: left;
+    width: 100%;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2); // Microsoft web site doesn't use Fabric colors!
+
+    :global(.ms-Button-label) {
+      font-weight: 400;
+    }
+
+    &:hover,
+    &:focus {
+      box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.16); // Microsoft web site doesn't use Fabric colors!
+      color: $ms-color-black;
+      background: #f0f0f0; // Microsoft web site doesn't use Fabric colors!
+    }
+
+    &:focus {
+      border-width: 2px;
+      border-style: solid;
+      border-color: $ms-color-black;
+      outline-color: rgba(255, 255, 255, 0.6); // Microsoft web site doesn't use Fabric colors!
+    }
+  }
+
+  .drawer {
+    padding: 24px 12px 24px 12px;
+    background: #fafafa; // Microsoft web site doesn't use Fabric colors!
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 20px;
+  }
+}
+
+.accordionChevron {
+  font-size: 16px;
+  margin-left: -6px;
+  color: rgba(0, 0, 0, 0.8);
+}

src/controls/accordion/Accordion.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import styles from './Accordion.module.scss';
+import { IAccordionProps, IAccordionState } from './index';
+import { css } from "@uifabric/utilities/lib/css";
+import { DefaultButton, IIconProps } from 'office-ui-fabric-react';
+
+/**
+ * Icon styles. Feel free to change them
+ */
+const collapsedIcon: IIconProps = { iconName: 'ChevronRight', className: styles.accordionChevron };
+const expandedIcon: IIconProps = { iconName: 'ChevronDown', className: styles.accordionChevron };
+
+export class Accordion extends React.Component<IAccordionProps, IAccordionState> {
+  private _drawerDiv: HTMLDivElement = undefined;
+  constructor(props: IAccordionProps) {
+    super(props);
+
+    this.state = {
+      expanded: props.defaultCollapsed == null ? false : !props.defaultCollapsed
+    };
+  }
+
+  public render(): React.ReactElement<IAccordionProps> {
+    return (
+      <div className={css(styles.accordion, this.props.className)}>
+        <DefaultButton
+          toggle
+          checked={this.state.expanded}
+          text={this.props.title}
+          iconProps={this.state.expanded ? expandedIcon : collapsedIcon}
+          onClick={() => {
+            this.setState({
+              expanded: !this.state.expanded
+            });
+          }}
+          aria-expanded={this.state.expanded}
+          aria-controls={this._drawerDiv && this._drawerDiv.id}
+        />
+        {this.state.expanded &&
+          <div className={styles.drawer} ref={(el) => { this._drawerDiv = el; }}>
+            {this.props.children}
+          </div>
+        }
+      </div>
+    );
+  }
+}
+

src/controls/accordion/IAccordion.types.ts

@@ -0,0 +1,10 @@
+
+export interface IAccordionProps {
+  defaultCollapsed?: boolean;
+  title: string;
+  className?: string;
+}
+
+export interface IAccordionState {
+  expanded: boolean;
+}

src/controls/accordion/index.ts

@@ -0,0 +1,2 @@
+export * from './Accordion';
+export * from './IAccordion.types';

src/index.ts

@@ -15,6 +15,7 @@ export * from './FolderExplorer';
 export * from './FolderPicker';
 export * from './IconPicker';
 export * from './Pagination';
+export * from './Accordion';
 
 export * from './IFrameDialog';
 export * from './IFramePanel';