Question

126

React-bootstrap accordion not working properly

rated 0 times [ 129] [ 3] / answers: 1 / hits: 19066 / 10 Years ago, wed, november 19, 2014, 12:00:00

I'm trying to learn react. Giving it a go, I was experimenting with react-bootstrap and was trying to implement accordion using react-bootstrap accordion. First I tried using ButtonToolBar, it worked fine.

var ButtonToolbar = ReactBootstrap.ButtonToolbar;

var Button = ReactBootstrap.Button;

var buttonsInstance = (

    <ButtonToolbar>

      <Button>Submit</Button>

      <Button>Cancel</Button>

    </ButtonToolbar>

);



React.renderComponent(

    buttonsInstance,

    document.getElementById('app')

);

But, react-bootstrap's accordion code wasn't working. It was showing the contents but not like we've in case of accordion. Here's the code:

var Accordion = ReactBootstrap.Accordion;

var Panel = ReactBootstrap.Panel;



var accordionInstance = (

    <Accordion>

      <Panel header=Collapsible Group Item #1 key={1}>

        Content1

      </Panel>

      <Panel header=Collapsible Group Item #2 key={2}>

        Content2

      </Panel>

      <Panel header=Collapsible Group Item #3 key={3}>

        Content3

      </Panel>

    </Accordion>

);



React.renderComponent(

    accordionInstance,

    document.getElementById('app')

);

I also tried using , it also behaved the same. I was taking help from here.

There's a similar question here. But, in my case I can't have it working in without customizing the ReactBootstrp.Panel.

Any Idea, how can I get it work?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myrap

Add To Favorites

Follow

Total Points: 407

Total Questions: 105

Total Answers: 109

Location: Cambodia

Member since Thu, Oct 7, 2021

3 Years ago

answered 10 Years ago jadyngraysons · Accepted Answer

So I hope that you've already found the answer to your question, but the following code should work. I think you simply need to change key={} to eventKey={} Let me know if this doesn't work for you.

var React = require('react');

var ReactPropTypes = React.PropTypes;

var Accordion = require('react-bootstrap').Accordion;

var Panel = require('react-bootstrap').Panel;    



var LeftSideInfo = React.createClass({

render: function () {

    var open = 3;

    return (

      <Accordion>

        <Panel header=Recommended Assignments eventKey='1'>

          Some Info here

        </Panel>

        <Panel header=Candidate Information eventKey='2'>

          More Info here

        </Panel>

        <Panel header=Contact Information eventKey={open}>

          Yet another Panel

        </Panel>

       </Accordion>

    );

  }

});



module.exports = LeftSideInfo;

As a side note, I'm trying to figure out how to stop it from closing one panel when another one is clicked open. I think I just need to play with the eventKey