bootstrap collapse does not work with dynamic content

[waynebrantley]

When you first click the link to open the collapsed area, the content is loaded - but the height is determined to be 0, if the request takes any time. Clicking the link to close and open again causes the loaded content to be shown - because the content was already there and the height is correct.

http://jsfiddle.net/waynebrantley/22pqk/

[meshy]

I get this too. It happens to me when trying to nest accordions. Because the outer accordion sets an exact height when expanded, the inner accordions get cut off when they expand.

[fat]

Yeah - this is a limitation of collapse. To work around this you should preload content and or set fixed height containers within the collapsed content.

[meshy]

I'm not a JavaScript dev, but is there not a way of setting the height of
the accordion-draw to auto once it has stopped moving to negate this
problem?

[waynebrantley]

Yeah, there are some alternatives that I use where the height of the collapse is properly set after dynamic load. Really, this is important - to have to preload all content that is very old style! :-)

[meshy]

Come to think of it... height needn't be set at all once display: block has been set and the transition is finished, as it should default to auto.

[grantnorwood]

+1 to address this limitation within the collapse component. Fixed height containers within the collapsed content as fat suggested isn't doing the trick for me, and in my opinion, the ability to default to handling dynamic content is high priority. I believe meshy is correct, no fixed height needs to be set on the outer .accordion element at all.

You can explicitly set the accordion height back to 'auto' on show and hide events as an interim hack. I hope this is helpful!

$('#my-accordion').on('show hide', function() {
    $(this).css('height', 'auto');
});

[jamiefolsom]

@grantnorwood Is "#my-accordion" the data-parent, the toggle or the target? Thanks for the hint.

[grantnorwood]

It's the data-parent, aka the root element. So my html and js look something like ...

<div id="my-accordion" class="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a href="#collapse-year-2012" data-parent="#my-accordion" data-toggle="collapse" class="accordion-toggle">2012</a>
        </div>
        <div class="accordion-body collapse in" id="collapse-year-2012">
            <div class="accordion-inner">
                2012 content ...
            </div><!-- .accordion-inner -->
        </div><!-- .accordion-body -->
    </div><!-- .accordion-group -->
    <div class="accordion-group">
        <div class="accordion-heading">
            <a href="#collapse-year-2011" data-parent="#my-accordion" data-toggle="collapse" class="accordion-toggle">2011</a>
        </div>
        <div class="accordion-body collapse" id="collapse-year-2011">
            <div class="accordion-inner">
                2011 content ...
            </div><!-- .accordion-inner -->
        </div><!-- .accordion-body -->
    </div><!-- .accordion-group -->
</div>

jQuery('document').ready(function() {
    jQuery('#my-accordion').on('show hide', function() {
        jQuery(this).css('height', 'auto');
    });
    jQuery('#my-accordion').collapse({ parent: true, toggle: true }); 
});

[jamiefolsom]

Thanks...

I went with jQuery show/hide:

("<selector>").click function(){ ("<selector>").hide(); ("<this element id>").show();}; 

seemed simpler.

[ghost]

I have encountered the same problem of meshy and explained it here: https://github.com/retlehs/roots/issues/559
So, I've tried with grantnorwood's code with no result and I can't understand how to make jamiefolsom's code work, sorry...

Can anyone please help?

[jasonthinks]

@grantnorwood you are super. it works for me, thank you

[widian]

@grantnorwood it also works for me, thank you!

[grantnorwood]

glad to hear it!

[Vespira]

Hi,
I've simply put a height: auto; into my css for the given collapsing divs.
It works like a charm, cheers.

[martynlesbirel]

I've got a collapsible panel whose content is solely dynamically generated. It contains a list of notes generated by the user or retrieved from a back end database. The only way I can get a panel to work is if I set an explicit height on the first element within the panel. height: auto doesn't work for me.

My next step is going to be trying to calculate and explicit size while collapsing and apply it otherwise completely rethink the interface as this limitation is a bit crippling.

[AndreyChursin]

it's stil not working...(( i load code
id=accorion.... from site https://getbootstrap.com/docs/4.0/components/collapse/
by ajax and it's "collapse card" not expand... nothing not helped me :-(

[Johann-S]

Please open a new issue @AndreyChursin and use the latest release of Bootstrap (v4.3.1)