How do I effectively implement bootstrap toggle data in ruby on rails loop?

Question

Hi people I have some challenges here.I used a data-toggle collapse loop on my apps index.html.erb page.Now it works for the first instance of the loop only. That means each time I click on it, it opens and close.But if I click on the others only the the same first one at the top is affected(works)The others don't work.This is the code below: In case you want to take a look at my model it is here How do I solve this Devise authentication challenge?

  <% @sub_color.each do |c| %><% unless sub_color.color.nil? %>
    <table class="table">
      <thead >
        <tr >
          <th >Names</h2></th >
          <th >Names 2</th >
          <th >Names 3</th >
        </tr >
      </thead >
      <tbody >
        <tr >
          <td >             
            <a href="#demo"data-toggle="collapse"><%= c.color.title%></a>
            <div id="demo" class="collapse">
              <%=c.title %>
            </div>
          </td >

Answer 1

I think u can easily do this.. if the @sub_color have id..

<td >             
   <a href="#demo_<%= c.id %>" data-toggle="collapse"><%= c.color.title%></a>
   <div id="demo_<%= c.id %>" class="collapse">
      <%=c.title %>
   </div>
</td >

Answer 2

I'm guessing your problem is that all of your collapsible div s have the same id . You probably need to do something like:

  <%= link_to c.color.title, "#demo-#{c.color.id}", data: {toggle: "collapse"} %>
  <%= content_tag :div, c.title, class: "collapse", id: "demo-#{c.color.id}" %>

I haven't used erb in a long time (I use HAML instead), so the syntax might be a little off.

This bit:

  <%= link_to c.color.title, "#demo-#{c.color.id}", data: {toggle: "collapse"} %>

Should give you something like (assuming c.color.id is 1 and c.color.title is Red):

  <a href="#demo-1" data-toggle="collapse">Red</a>

And this bit:

  <%= content_tag :div, c.title, class: "collapse", id: "demo-#{c.color.id}" %>

Should give you something like (assuming c.title is Blue):

  <div id="demo-1" class="collapse">Blue</div>

Or something along those lines.