Michael Michael -4 years ago 89
CSS Question

Bootstrap's accordeon shows all items opened initially in React app, should be closed

Here is the React (JSX) code of the accordion:

<div className="panel panel-default receipe">
<div className="panel-heading">
<h4 className="panel-title">
<a data-toggle="collapse" data-parent="#recipes" href={"#collapse"+i}>
<div id={"collapse"+(i++)} class="panel-collapse collapse">
<Ingredients ingredients={recipe.ingredients}/>

Codepen: http://codepen.io/lafisrap/pen/LWdovO

It shows the titles and items correctly, and items can be opened and closed. It's just that they are open at the beginning. I don't want to use
as it is not nice ;-) to put jQuery code into React. (other opinions?)

Answer Source

Your problem is that you are using class instead of className on this line:

<div id={"collapse"+(i++)} class="panel-collapse collapse">

Check line #48 in your codepen.

And by the way, I think this line id={"collapse"+(i++)} can be also written like:


Looks better

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download