Nsryjdtyk

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

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".

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