Bootstrap Collapse loads collapsed on page load

Question

the title pretty much covers the problem I'm having.

I've a list on a website I'm developing and I have hidden things within collapsible elements.

The problem I have is that they are already collapsed on page load.

Does anyone have any idea on how to fix this?

Thanks.

Answer 1

Thanks for your comment Rob.

Figured it after looking through the HTML, I need to use collapse but all but one were using collapse in (or collapse show in bootstrap 4).

Problem sorted :)

Load collapsed on page load :

<div id="collapseOne" class="panel-collapse collapse in">

Load hidden until clicked :

<div id="collapseOne" class="panel-collapse collapse">

Answer 2

As of bootstrap 4.2.1 if we want to show the collapsed content on load:

use collapse show class to the div or any element you want to show.

check the docs Bootstrap Collapse

Answer 3

Bootstrap documentation says this:

The collapse plugin utilizes a few classes to handle the heavy lifting:

.collapse hides the content

.collapse.in shows the content

.collapsing is added when the transition starts, and removed when it finishes

Edit your HTML accordingly (use collapse.in instead of collapse)