Collapse

Collapse is a component which toggles content. Useful for grouping great amount of texts and/or graphics into expanding and collapsing items.

Collapse is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0.

Example

Default Collapse example.

import React from "react";
import { CDBBtn, CDBCollapse, CDBContainer } from "cdbreact";
class Collapse extends Component {
  state = {
    collapseID: "",
  };
  toggleCollapse = (collapseID) => () => {
    this.setState((prevState) => ({
      collapseID: prevState.collapseID !== collapseID ? collapseID : "",
    }));
  };
  render() {
    return (
      <CDBContainer>
        <div
          style={{
            margin: "auto",
            width: "80%",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            minHeight: "100vh",
          }}
        >
          <CDBBtn
            color="primary"
            onClick={this.toggleCollapse("basicCollapse")}
            style={{ marginBottom: "1rem" }}
          >
            COLLAPSE BUTTON
          </CDBBtn>
          <CDBCollapse id="basicCollapse" isOpen={this.state.collapseID}>
            <p>
              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
            </p>
          </CDBCollapse>
        </div>
      </CDBContainer>
    );
  }
}

API

In this section you will find advanced information about the Collapse component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Collapse Import Statement

You need to import the Contrast Collapse component first before using it.

import { CDBCollapse } from "cdbreact";

API Reference: Contrast Collapse Properties

The table below shows the configuration options of the CDBCollapse component.