CODEWITHSUNDEEP
jqueryruby-on-railsruby
Megan Woodruff
Megan Woodruff

Reputation: 194

Dynamic Collapsible Lists in Rails 4 app

UPDATE: For anyone who has this problem in the future. I used the CollapsibleList from http://code.stephenmorley.org/javascript/collapsible-lists/. It worked like a charm! Just include it in your app/assets/javascripts folder and add to your .html.erb with the list and follow the instruction for referencing the classes from the link.

I have a Rails 4 app with Tasks, Missions, and SubTasks. Each Tasks has many Missions. Each Mission has many tasks. And each Task has many subtasks, but a subtasks can only have one tasks. On the mission index page, I dynamically creating a tree like structure using nested lists. Currently, it looks like: 

     <% @missions.each do |mission| %>

         <li data-toggle="collapse" data-target="list">

            <%=  mission.id %>| <%= mission.name %> | <%= link_to mission.description, mission %>

                   <% if !mission.tasks.empty? %>           

                       <div id="list" class="collapse">

                         <ul><% mission.tasks.each do |task| %>

                           <li><%=  link_to task.name,task %>                   
                  <% if !task.sub_tasks.empty? %>

                                <ul>

                    <% task.sub_tasks.each do |sub_task| %>

                    <li><%= sub_task.name %></li>

                            <% end %>

                </ul>

               </li>

            <% end %>

            <%end%>
           </ul> 
            </div>
     <%end%>
       </li> 
 <% end %>
</ul>
</div>

This gave me the basic structure that I wanted. I added the following script:

<script>
$('#data-toggle').collapse();
</script>

And it made the list item collapse once it was clicked. However, it only applied to the first element of the list. I guess I just wanted to know is there a way to use the collapse functionality on each of the list items.

I have tried to use the ancestry and jstree gems. However, I can't find a example of applying those to an existing rails app. Any help would be appreciated.

Upvotes: 2

Views: 1135

Answers (1)

Megan Woodruff
Megan Woodruff

Reputation: 194

UPDATE: For anyone who has this problem in the future. I used the CollapsibleList from http://code.stephenmorley.org/javascript/collapsible-lists/. It worked like a charm! Just include it in your app/assets/javascripts folder and add to your .html.erb with the list

<script src="CollapsibleList.js"></script>

and follow the instruction for referencing the classes from the link.

Upvotes: 2

Related Questions