Sign in


Sign up


Bootstrap collapse

Bootstrap collapse plugin allows you to toggle content on your pages with a bit of JavaScript and some classes. A flexible plugin that utilizes a handful of classes for easy toggle behavior.


Basic examples

Click the buttons below to show and hide another element via class changes:

  1. .collapse hides content
  2. .collapsing is applied during transitions
  3. .collapse.show shows content

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

                
import React, { Component } from 'react';
import { Button, Collapse } from 'mdbreact';

class Example extends 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>
        <div>
          <Button color="primary"  onClick={this.toggle} style={{ marginBottom: "1rem" }}>Toggle1</Button>
          <Button color="info" onClick={this.toggle} style={{ marginBottom: "1rem" }}>Toggle2</Button>
          <Collapse isOpen={this.state.collapse}>
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
          </Collapse>
        </div>
      </div>
    );
  }
}
export default Example;