Collapse

The Collapse component allows you to easily toggle the visibility of your content.

Basic Example

😍 Now you see me!

In sagittis nibh non arcu viverra, nec imperdiet quam suscipit. Sed porta eleifend scelerisque. Vestibulum dapibus quis arcu a facilisis.

import React from "react";
import Button from "shards-react/button";
import Collapse from "shards-react/collapse";

export default class BasicCollapseExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { collapse: false };
  }

  toggle() {
    this.setState({ collapse: !this.state.collapse });
  }

  render() {
    return (
      <div>
        <Button onClick={this.toggle}>Toggle</Button>
        <Collapse open={this.state.collapse}>
          <div className="p-3 mt-3 border rounded">
            <h5>😍 Now you see me!</h5>
            <span>
              In sagittis nibh non arcu viverra, nec imperdiet quam suscipit.
              Sed porta eleifend scelerisque. Vestibulum dapibus quis arcu a
              facilisis.
            </span>
          </div>
        </Collapse>
      </div>
    );
  }
}

Initial Visibility

You can control the visibility of your collapsed element via the open prop.

😁 I am already visible!

In sagittis nibh non arcu viverra, nec imperdiet quam suscipit. Sed porta eleifend scelerisque. Vestibulum dapibus quis arcu a facilisis.

import React from "react";
import Button from "shards-react/button";
import Collapse from "shards-react/collapse";

export default class CollapseInitialVisibilityExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { collapse: true };
  }

  toggle() {
    this.setState({ collapse: !this.state.collapse });
  }

  render() {
    return (
      <div>
        <Button onClick={this.toggle}>Toggle</Button>
        <Collapse open={this.state.collapse}>
          <div className="p-3 mt-3 border rounded">
            <h5>😁 I am already visible!</h5>
            <span>
              In sagittis nibh non arcu viverra, nec imperdiet quam suscipit.
              Sed porta eleifend scelerisque. Vestibulum dapibus quis arcu a
              facilisis.
            </span>
          </div>
        </Collapse>
      </div>
    );
  }
}

Props

The following props are available for the Collapse component.

Prop	Description	Type	Default	Required
open	Whether it is open, or not.	`Bool`	`false`	No
children	The children components.	`Array[Node]Node`	-	No
tag	The element tag type.	`FuncString`	`"div"`	No
className	The class name.	`Node`	-	No
navbar	Whether it is located inside a navbar, or not.	`Bool`	-	No
innerRef	The inner ref.	`FuncStringObject`	-	No
appear	-	-	`false`	No
enter	-	-	`true`	No
exit	-	-	`true`	No
timeout	-	-	`TIMEOUT.COLLAPSE`	No