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}>
{recipe.name}
</a>
</h4>
</div>
<div id={"collapse"+(i++)} class="panel-collapse collapse">
<Ingredients ingredients={recipe.ingredients}/>
</div>
</div>


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
$("#receipes").collapse("hide");
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:

id={`collapse${i++}`}

Looks better

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