react-smart-collapse

An instant collapse panel

Live demo

Installation

npm install --save react-smart-collapse

Usage

To create collapse you only need the CollapsePanel component.

import { CollapsePanel } from 'react-smart-collapse';

Basic example

      <CollapsePanel collapsed={false} title="Basic example">
        <div>Basic example</div>
        <div>Basic example</div>
        <div>Basic example</div>
        <div>Basic example</div>
        <div>Basic example</div>
        <div>Basic example</div>      
      </CollapsePanel>

Collapsed example

      <CollapsePanel collapsed={true} title="Collapsed example">
        <div>Collapsed example</div>
        <div>Collapsed example</div>
        <div>Collapsed example</div>
        <div>Collapsed example</div>
        <div>Collapsed example</div>
        <div>Collapsed example</div>      
      </CollapsePanel>

Add border to the panel

      <CollapsePanel collapsed={false} title="Border example" border="1px solid lightgray">
        <div>Border example</div>
        <div>Border example</div>
        <div>Border example</div>
        <div>Border example</div>
        <div>Border example</div>
        <div>Border example</div>      
      </CollapsePanel>

Styled title bar

      <CollapsePanel collapsed={false} title="Styled title bar example" style={{color: 'red', backgroundColor: 'lightBlue', fontSize: '18px'}}>
        <div>Styled title bar example</div>
        <div>Styled title bar example</div>
        <div>Styled title bar example</div>
        <div>Styled title bar example</div>
        <div>Styled title bar example</div>
        <div>Styled title bar example</div>      
      </CollapsePanel>

Credits

Coded by Feng Wang , email: [email protected]