<SpacedGroup direction="vertical" xs={24}>
    <Expander title="Show Details">
      This content can be hidden from the user in order to reduce the mental
      overhead required to understand the form or content.
    
    <Expander expandedTitle="Hide Details" expanded>
      This content can be hidden from the user in order to reduce the mental
      overhead required to understand the form or content.
    </Expander>
    <Expander title="Custom Show Details">
      This content can be hidden from the user in order to reduce the mental
      overhead required to understand the form or content.
    </Expander>
    <Expander expandedTitle="Custom Hide Details" expanded>
      This content can be hidden from the user in order to reduce the mental
      overhead required to understand the form or content.
    </Expander>
  </SpacedGroup>
</Playground>

{() => {
    class StateManager extends React.Component {
      constructor(props, context) {
        super(props, context)
        this.state = { isExpanded: false }
        this.toggleExpanded = this.toggleExpanded.bind(this)
      }
      toggleExpanded() {
        this.setState({ isExpanded: !this.state.isExpanded })
      }
      render() {
        return (
          <Expander
            title="Show Details"
            expandedTitle="Hide Details"
            expanded={this.state.isExpanded}
            onToggle={this.toggleExpanded}
          >
            This content can be hidden from the user in order to reduce the
            mental overhead required to understand the form or content.
          
        )
      }
    }
    return <StateManager />
  }}
</Playground>