Why does Bootstrap Collapse keep removing the “collapse” class after expanding?

I am using jQuery Collapse on an element that’s inserted via Ajax.

When I apply the line below, it removes the collapse class. I need the class to remain so I can call collapse(‘hide’) when the Ajax content needs to be closed.

$ajaxContent.html(data).find('.collapse').collapse();

Here’s what I have in my .php file:

<section class="collapse">

Here’s what it ends up with after the jQuery is applied:

<section class="in" style="height: auto;">

Why is it doing this and how do I fix it so the collapse class doesn’t get removed?

Answer

Avoid calling your element’s class collapse as it’s being used by the plugin. Call it something else (eg. give it an id of collapse instead of class) and it should work.

EDIT: Alternatively you can use the plugin via data attributes (data-toggle="collapse"); I’d still refrain from calling the element’s class collapse to avoid confusion.

EDIT #2: Following @friedi’s comment to the question, I had a look at the example provided on Bootstrap’s documentation on collapse and realized that they are actually using the collapse class too. Going out from the fact that you accepted my answer, I’m assuming that renaming / removing it still resolved the issue for you for some reason, but the origin of the issue may be laying somewhere else in your code (maybe another bit of js or the structure of your HTML, not sure).

EDIT #3: I think the culprit is probably in whatever your data variable is holding; I’m guessing that it doesn’t have the class collapse added to whatever structure you’re applying to $ajaxContent using the html function, and it’s actually missing from there instead of it getting removed by the collapse function (which it is not, as it’s not removing that class).