Expansion Panel

Expansion panels allow you to place details in a container that is initially hidden, but can be opened by the user.

🙌 Heads up! This code is editable. The preview above will update to reflect your changes.

class ExpansionPanelExample extends Component {
  render() {
    // Pass a `panelId` to toggle whether it is open or closed.
    const togglePanel = panelId => {
      this.setState(prevState => {
        return {
          [panelId]: !prevState[panelId],
        };
      });
    };

return (
      <div>
        <ExpansionPanel
          open={this.state.one}
          onClick={() => togglePanel('one')}>
          <ExpansionPanel.Header>Expansion Panel One</ExpansionPanel.Header>
          <ExpansionPanel.Body>
            <p style={{ margin: 0 }}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Pellentesque fermentum sed magna quis interdum. Suspendisse vitae
              lobortis odio, a accumsan purus. Vivamus suscipit magna et nisl
              mattis vestibulum. Donec interdum leo elementum eros fringilla, ut
              varius velit volutpat. In porttitor tempus purus id lacinia.
              Phasellus vitae blandit tellus, fermentum dictum libero.
            </p>
          </ExpansionPanel.Body>
        </ExpansionPanel>
        <ExpansionPanel
          open={this.state.two}
          onClick={() => togglePanel('two')}>
          <ExpansionPanel.Header>Expansion Panel Two</ExpansionPanel.Header>
          <ExpansionPanel.Body>
            <p style={{ margin: 0 }}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Pellentesque fermentum sed magna quis interdum. Suspendisse vitae
              lobortis odio, a accumsan purus. Vivamus suscipit magna et nisl
              mattis vestibulum. Donec interdum leo elementum eros fringilla, ut
              varius velit volutpat. In porttitor tempus purus id lacinia.
              Phasellus vitae blandit tellus, fermentum dictum libero. Nullam
              lacus leo, convallis ut mattis non, luctus eu tellus.
            </p>
          </ExpansionPanel.Body>
        </ExpansionPanel>
        <ExpansionPanel
          open={this.state.three}
          onClick={() => togglePanel('three')}>
          <ExpansionPanel.Header>Expansion Panel Three</ExpansionPanel.Header>
          <ExpansionPanel.Body>
            <p style={{ margin: 0 }}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Pellentesque fermentum sed magna quis interdum. Suspendisse vitae
              lobortis odio, a accumsan purus.
            </p>
          </ExpansionPanel.Body>
        </ExpansionPanel>
      </div>
    );
  }

state = {
    one: false,
    two: false,
    three: false,
  };
}

return <ExpansionPanelExample />;

Usage

import { ExpansionPanel } from 'materialish';
import 'materialish/materialish.css';

`ExpansionPanel`

Props

Prop Name	Default Value	Description
className		Additional class name(s) to add to the menu
open	false	Whether or not this ExpansionPanel is expanded
children		A single `ExpansionPanel.Header` and a single `ExpansionPanel.Body`
nodeRef		Pass a ref to get access to the root node
...rest		Other props are placed on the root element

CSS Variables

Variable	Default Value	Description
--mt-baseFontSize	1rem	The size of text within the menu
--mt-fontFamily	'Roboto'	The font family to use for text

`ExpansionPanel.Header`

Props

Prop Name	Default Value	Description
className		Additional class name(s) to add to the panel header
children		The content to display in the header of the expansion panel
nodeRef		Pass a ref to get access to the root node
...rest		Other props are placed on the root element of the panel header

`ExpansionPanel.Body`

Props

Prop Name	Default Value	Description
className		Additional class name(s) to add to the panel body
children		The content to display in the body of the expansion panel
open	inherited	Whether or not the panel is open. This value is inherited from the parent, so you do not need to provide it.
nodeRef		Pass a ref to get access to the root node
...rest		Other props are placed on the root element of the panel body

Useful Links

Source Code