Expanding Column

An ExpandingCol is a column that can expand or collapse when a user interacts with an Expander button. It is similar to an expanding drawer component, but may be better in situations where it is directly alongside other grid column components.

<Row flex>
  <ExpandingCol.Stateful small={6} shrink>
    <Callout>
      <Row>
        <Col>
          <p>This state will be shown or hidden with the buttons.</p>
        </Col>
      </Row>
    </Callout>
  </ExpandingCol.Stateful>
  <Col>
    <p>This is outside the expander.</p>
  </Col>
</Row>

<Row flex>
  <ExpandingCol.Stateful small={6} shrink>
    <Callout>
      <Row>
        <Col>
          <p>This state will be shown or hidden with the buttons.</p>
        </Col>
      </Row>
    </Callout>
  </ExpandingCol.Stateful>
  <Col>
    <p>This is outside the expander.</p>
  </Col>
</Row>

<div>
  <Row>
    <ExpandingCol small={6}>
      <Callout>
        <Row>
          <Col>
            <p>I am hidden away.</p>
          </Col>
        </Row>
      </Callout>
    </ExpandingCol>
    <Col small={6}>
      <p>The column next to this one is collapsed.</p>
    </Col>
  </Row>
  <Row>
    <ExpandingCol small={6} open>
      <Callout>
        <Row>
          <Col>
            <p>I am expanded.</p>
          </Col>
        </Row>
      </Callout>
    </ExpandingCol>
    <Col small={6}>
      <p>The column next to this one is expanded.</p>
    </Col>
  </Row>
</div>

<div>
  <Row>
    <ExpandingCol small={6}>
      <Callout>
        <Row>
          <Col>
            <p>I am hidden away.</p>
          </Col>
        </Row>
      </Callout>
    </ExpandingCol>
    <Col small={6}>
      <p>The column next to this one is collapsed.</p>
    </Col>
  </Row>
  <Row>
    <ExpandingCol small={6} open>
      <Callout>
        <Row>
          <Col>
            <p>I am expanded.</p>
          </Col>
        </Row>
      </Callout>
    </ExpandingCol>
    <Col small={6}>
      <p>The column next to this one is expanded.</p>
    </Col>
  </Row>
</div>