Bootstrap accordion - how to make first open by default

I have a bootstrap accordion. I customized it to add the plus and minus icons. I’m trying to figure out how to start with the first panel expanded and have the minus icon.

I tried adding the “in” class to
<div id="collapseOne" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingOne">
but then that panel always has the minus sign.

I’m trying to get it so that when the page loads only the first panel is expanded and has a minus sign. Then when another panel is clicked the first closes and turns into a plus sign like the other collapsed panels.

here is a codepen

Well, open the inspection tool on one of your panels.

What’s the difference between a panel that is open, and one that is closed, in the HTML?

How can you code the HTML, such that your initial condition is true?

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.