Category: Fluent UI

Fluent UI / Office UI Fabric does not provide any Accordion control. But you can create your Accordion using the Fluent UI controls itself. Below is the code for Accordion control that I have created in React. You can also see it action on CodeSandbox.

import * as React from "react";
import {
  DefaultPalette,
  AnimationClassNames
} from "office-ui-fabric-react/lib/Styling";
import {
  IconButton,
  initializeIcons,
  Stack,
  IStackItemStyles,
  IStackStyles
} from "office-ui-fabric-react";

initializeIcons();

export class Accordion extends React.Component<IAccordionProps, {}> {
  private accordionHeader: IStackItemStyles = {
    root: {
      background: DefaultPalette.neutralLighter,
      padding: 5,
      cursor: "pointer"
    }
  };
  private accordion: IStackStyles = {
    root: {
      borderStyle: "solid",
      borderWidth: 1,
      borderColor: DefaultPalette.neutralTertiary
    }
  };
  private accordionConent: IStackStyles = {
    root: {
      padding: 10
    }
  };

  constructor(props: IAccordionProps, public state: any) {
    super(props);

    this.state = {
      content: false
    };
  }

  private showContent = (e) => {
    this.setState({
      content: !this.state.content
    });
  };

  public componentDidMount() {}

  public render(): React.ReactElement<IAccordionProps> {
    return (
      <>
        <Stack horizontal={false} styles={this.accordion}>
          <Stack.Item styles={this.accordionHeader}>
            <Stack horizontal={true} onClick={this.showContent}>
              <Stack.Item>
                <IconButton
                  iconProps={{
                    iconName: this.state.content
                      ? "ChevronDown"
                      : "ChevronRight"
                  }}
                />
              </Stack.Item>
              <Stack.Item align="center">{this.props.header}</Stack.Item>
            </Stack>
          </Stack.Item>
          {this.state.content && (
            <Stack.Item
              className={AnimationClassNames.slideDownIn20}
              styles={this.accordionConent}
            >
              {this.props.children}
            </Stack.Item>
          )}
        </Stack>
      </>
    );
  }
}

interface IAccordionProps {
  header: string;
}

You can use the control in your code with below sample code.

<Accordion header="Lorem Ipsum">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </Accordion>