Bootstrap'collapsed'类未出现在DOM加载中

Question

I've got an accordion menu using Bootstrap's Collapse functionality, and I tried to style it based on the CSS classes Bootstrap uses to show and hide the collapsible element.

My problem is that when the document is fully loaded, the collapsed class is not loaded on the collapsed elements, while they appear collapsed. So my page renders with it's 'open' styling, while every collapsible element is collapsed like it should be. After the first couple of clicks, the collapsed class is present and the styling works as it should.

Forcing the collapsed class onto each element post DOM load for one is a messy way to solve the problem, but the styling still shows up for a second before changing.

To illustrate, this should be happening:

Collapsed State

Uncollapsed State

But instead, on load, I'm getting this as the collapsed classes simply aren't present:

Any ideas what can be done about this?

Edit: Code Inclusion (ignore the Razor snippets)

<button class="category-select" data-toggle="collapse" data-target="#collapsible-@i">@fieldset.GetValue("title")</button>
    <div id="collapsible-@i" class="collapse">
        <div class="category-inner">
            @Html.Raw(@fieldset.GetValue("innerText"))
        </div>
    </div>

Answer 1

Just realised what I did wrong based on the styles that are present. What I should have done is added the collapsed class to the html myself.

The code should in fact look like this:

<button class="category-select collapsed" data-toggle="collapse" data-target="#collapsible-@i">@fieldset.GetValue("title")</button>
<div id="collapsible-@i" class="collapse">
    <div class="category-inner">
        @Html.Raw(@fieldset.GetValue("innerText"))
    </div>
</div>

Correct styles are then applied on load, ready for collapsed to be removed on click.

Very silly mistake.