Bootstrap collapse can't handle too many elements

Question

I have a bootstrap collapse panel which is loaded with a lot of data from an ajax call. When the data is loaded in the collapse panel is populated with ~ 2000 dom elements, mainly checkboxes and spans. I've measured the time for the call and the creation of the dom elements, and it doesn't seem to be a problem. It takes less than a second to load and create the elements using jQuery.

However, when I click to expand collpased panel it causes the site to lag, and it takes a good while for the panel to expand.

Is there any solution to this, or an alternative to the bootstrap collapse panels? Could you expand it and show the elements incrementally as you scroll?

I don't seem to have any problem at all with collapse panels that contain less elements.

     <div id="collapse_function" class="panel-collapse collapse">
      <div class="panel-body">

        <div class="panel-group" id="inner_accordion">

        <!-- Checkboxes and spans are loaded here dynamically -->

        </div>

      </div>

Edit: It seems to be the case that even with disabled animations, the site lags.

If you collapse and expand again the panel does it have the same behavior? — Tasos K., Aug 31 '14 at 22:05
I am guessing that because of the great amount of DOM elements the transition effect is causing this. Try to disable it, read here how to do it http://stackoverflow.com/questions/13119912/disable-bootstraps-collapse-open-close-animation — Tasos K., Aug 31 '14 at 22:29
@TasosK. I tried disabling it, but even without any animtaion the collapse takes a lot of time. Any idea on how to load it incrementally or do you have any other solution? — danihodovic, Aug 31 '14 at 22:43
I would try to decrease the size of the ajax call and the 2000 DOM elements, divide it into more sections and put each one in its own panel. If you cannot do this, you could put that data on their own page, since they are too much to be shown inside a panel. You know better, since you know how your page is and how are these data organized — Tasos K., Aug 31 '14 at 23:10
Is the ~ 2000 dom elements loaded when click on the collapse, or is it already loaded? — HenryW, Sep 01 '14 at 16:21
@HenryW The dom elements are actually appended to a
inside the collapse, which takes 3-4 seconds (not a problem). But after that, when the collapse is toggled up or down it lags. Even after a couple of times of clicking. Inside the collapse I have a scroll box with all of the elements. — danihodovic, Sep 01 '14 at 16:22
it would nice to see a jsfiddel of this collapse (so we can see if it is cause of the ajax loading or it's content — HenryW, Sep 01 '14 at 16:32
I'll try to set it up if I can, but I'm very sure its not the ajax since that is only loaded once. — danihodovic, Sep 01 '14 at 16:40

score 0 · Answer 1 · answered Sep 01 '14 at 16:27

you should use the :

$('#collapse_function').on('show.bs.collapse', function() { alert('we Go SHOW'); });
$('#collapse_function').on('hide.bs.collapse', function() { alert('we Go Hide'); });
$('#collapse_function').on('shown.bs.collapse', function() { alert('we ARE SHOWN'); });
$('#collapse_function').on('hidden.bs.collapse', function() { alert('we ARE HIDDEN'); });

score 0 · Accepted Answer · answered Sep 02 '14 at 21:52

0

Well, it seems like I was appending too many dom elements to the collapse panel. I solved it by lazily loading the elements when scrolling down in the panel.

answered Sep 02 '14 at 21:52

danihodovic

1,151
3
18
28

Bootstrap collapse can't handle too many elements

2 Answers2