Trying to build a front end with materializecss but having a trouble getting the collapsible element to work

Question

I'm trying to build a front end and I want to use the collapsible element. The issue is that it doesn't do anything, I can click on the header box but nothing happens.

According to the docs you have to 'initialize' the element if it's added dynamically.

So I'm doing this after every action that destroys & creates Dom elements:

function setUpPageElements () {
    $.each($('.collapsible'), function (index,value) { 
        value.collapsible({
          accordion : true
        });
    })
};

And here's my ERB template

<ul class="collapsible" data-collapsible"accordion">
        <% if jobs.first %>
            <% jobs.each do |job| %>
                <%= render partial: 'job', locals: {job: job} %>
            <% end %> 
        <% else %>
        <li >
            <section id="header" class="collapsible-header active" > <p id="name">No active jobs</p></section>
            <section  class="collapsible-body">
                There are currently no active jobs.
                You can create new jobs by creating selecting 'New Job from navigation bar along the top'
            </section>
        </li>
        <% end %>
</ul>

Answer 1

le sigh

Turns in the initial request for a page, I wasn't calling the element initialization function, thought I was; turns out I'd put the function call in the wrong place palm forehead in stupidity so it wasn't getting called.