CODEWITHSUNDEEP
javascriptreactjstwitter-bootstrap
bier hier
bier hier

Reputation: 22520

How to collapse a div with reactjs?

I am using reactjs and bootstrap v 3.0 but I can't find any collapse class in there so I defined this in my scss. The problem is that the togglebutton does not work or the toggleevent is not triggered on the div:

 toggle(e) {
        console.log('testing e',e)
        if (e.target.class === 'collapse') {
            e.target.className = 'collapse.in'
        } else {
            e.target.className = 'collapse'
        }
    }

This is my button:

<button className="btn btn-block" onClick={() => {
               this.toggle.bind('demo')
               }}>
     Open/close
</button>

How can I change the className from collapse to collapse.in and viceversa? Here is a code sample:Codepen

Upvotes: 6

Views: 56374

Answers (3)

ishandutta2007
ishandutta2007

Reputation: 18184

There are very nice libraries for this, I wouldn't advice to re-inventing the wheel but use something like react-collapsible You will have lots of flexibility of styling it too.

Install like this : npm i react-collapsible

Then use like this:

import React from 'react';
import Collapsible from 'react-collapsible';

const YourComponent = () => {
  return (
    <Collapsible trigger='Open' triggerWhenOpen='Close'>
      <button className="btn btn-block" onClick={() => {this.toggle.bind('demo') }}>
        This button collapses
      </button>
    </Collapsible>
  );
};
export default YourComponent;

Upvotes: -1

Saurabh Kulkarni
Saurabh Kulkarni

Reputation: 51

There is also a library called as "react-bootstrap" which allows the integration of react with bootstrap. They have a very simple example for making the collapsible div, i am sharing the code for this which i have changed according to what i wanted.

You can use this component anywhere inside your code. This will just return a button with collapsible div. 

import React, {Component} from 'react'
import {Button, Collapse} from 'react-bootstrap'

class Test extends Component{
    state={ 
        open:false
       }

    render(){
      return(
        <div className= "container">
           <Button className="btn" onClick={!this.state.open}>
               Collapse Div
           </Button>

           <Collapse in={this.state.open}>
               <div>
                  <p>Content when the button is clicked</p>
               </div>
           </Collapse>
        </div>
        );
       }
}

export default Test

Upvotes: 4

lorenzo-s
lorenzo-s

Reputation: 17010

Your SCSS and your HTML is fine, the problem is in how you used React.

The open/closed state of your component should be represented with a property in this.state, and the toggle() function should simply toggle that property. The render() function, finally, should be responsible of setting the right CSS class on the <div> it renders.

Here's your Codepen updated with my suggestions.

What I did:

  • I defined an initial state in the component constructor: as you can see, I set the open property to false initially;

  • I rewrote the toggle() method, using this.setState() to toggle the value of the open property;

  • I modified the render() function generating the class name of the <div> depending on the state. If the component state is open, the class name will be "collapse in", else it will be only "collapse".

Upvotes: 8

Related Questions