web
mobile
Edit these docs Rate these docs

React Mobile Collapse

React Mobile Collapse - Bootstrap 4 & Material Design

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


How it works

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


Basic example

Basic example

Android
iOS

        <script>
        import React, { Component } from "react";
        import { Text } from "react-native";
        import Collapse from "mdbreact-mobile";

        export default class CollapsePage extends Component {

          render() {
            return (
              <Collapse btnTitle="Collapse">
                <Text>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipisicing
                  elit. Sed perspiciatis aspernatur, exercitationem recusandae autem harum quae asperiores dolore, corrupti
                  ullam nisi suscipit rem ipsum eaque! Esse error rerum ea obcaecati consectetur ex maiores corrupti amet
                  laudantium ad fuga quas at, fugit vel minus voluptates praesentium cupiditate dolorem necessitatibus
                  molestiae asperiores.
                </Text>
              </Collapse>
            );
          }
        }

        </script>
      

Edit these docs Rate these docs

Collapse - 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 in working with it.


Import statement


            import { MDBCollapse } from 'mdbreact-mobile'
      

API Reference: Properties

Name Type Default Description Example
title btnTitle '' Button default text <MDBCollapse btnTitle="Text" />