Materialize: Collapsible don't expand

[bosetti]

Hi everyone!
I'm doing my first steps with Materialize.
I want to generate a dynamic list from an XML file.
The problem I have is that the results are not expanded.
Here's the code:

$(document).ready( function() {
   $('#term').keyup( function() {
      $.get('search_xml.php?q='+escape($('#term').val()), function(data) {
         html = '<div id="results"><ul class="collapsible" data-collapsible="accordion">';
     $(data).find('tarifa').each( function() {
        var ep = $(this);
        html += '<li>';
        html += '<div class="collapsible-header"><i class="material-icons">place</i>'+ep.attr('localidad')+'</div>';
        html += '<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>';
        html +=  '</li>';
         } );
     html += '</ul></div>';
     $('#results').replaceWith( html );
         } );
      } );

   $('.collapsible').collapsible({
      accordion : true
    });

Can you help me?
Thank you in advance.
Sergio

[filippolcr]

I've the same problem! I've solved removing:

$('.collapsible').collapsible({
      accordion : true
    });

[acburst]

Dynamic collapsible loading is working for me. Can you give me any more information? HTML, console errors or anything?

woops didnt mean to close, sorry.

[bosetti]

This is one page http://flechadelplata.com/pru/tarifas-gba3.html

This is other http://flechadelplata.com/pru/tarifas-gba4.html
Static content work an dynamic content don´t work. :(

[blahah]

for dynamic content you need to call

$('.collapsible').collapsible({
  accordion : true
});

every time the content is updated.

[blahah]

Although, in the latest release the need to do this has been removed, and in fact doing so will stop the collapsibles from working.

[ghost]

The issue can be fixed by setting a height on the collapsed item. At the moment Materilize doesn't put any heigt on the div elemen.

Materilize code is (line 348):
object.siblings('.collapsible-body').stop(true,false).slideDown({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});

Here the height is set to 0 and that is not recommended. Just calculate the height of the div and put it in the css. I'm searching for a general sollution for my project. If I found some then I will submit it to the git.

A quick fix is to write an error in de complete function. Then the height of the div will be placed and the collapslible-body will be shown.

[tomscholz]

The links aren't working anymore and it seems that this issue was abandoned. Closing...