Search code examples
cssruby-on-railsmaterialize

Materialize CSS - Collapsible

I'm working with Materialize CSS and using the collapsible accordion-style element ( http://materializecss.com/collapsible.html ).

For some reason, as soon as I click to open an item, it immediately closes.

Here is my code. My goal is simply to be able to use collapsible as intended (i.e. with the element opening and remaining open).

<div style="width:600px; margin:0 auto;">
    <ul class="collapsible" data-collapsible="accordion">

    <% @friends.each do |friend| %>
        <li>
        <% latestTweet = CLIENT.user_timeline(friend.twitterHandle)[0] %>
          <div class="collapsible-header">

            <img src="<%= latestTweet.user.profile_image_url %>" width="40" height="40"><%= link_to friend.firstName + " (" + friend.twitterHandle + ")", "friends/" + friend.id.to_s  %><div style="float:right"><%= (Indico.sentiment(latestTweet.text)*100).round %></div>
          </div>
          <div class="collapsible-body">
            <p>
                <%= latestTweet.text %>
            </p>
          </div>
        </li>
        <% end %>
    </ul>
    </div>
Solution

  • It is probably because Materialize requires JQuery 2.1.1 while Rails uses 1.11.2.

    In your assests/application.js try

    //= require jquery2
//= require jquery_ujs

    https://github.com/rails/jquery-rails