Below is my code where I had used bootstrap syntax to display info in a accordion using an api call the structure of depending on if there was the data available. Sometimes when I called the data the definitions didn't have an example ready to use so I had to account that in my work. When working in a loop the accordion doesn't work properly if the accordion div id wasn't unique. if you don't have unique identifiers available, consider making a counter whenever you move on to the next value so that it lets the accordion act independently from each other.
<% count = 0 %>
<% @data['collection'].each do |col| %>
<h3><%=col['title']%></h3>
<% col['definitions'].each do |deF| %>
<%count = count + 1%>
<%if deF.has_key?('example')%>
<div class="accordion" id="accordion<%=count%>">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse<%=count%>" aria-expanded="true" aria-controls="collapseOne">
<%= "#{count}. #{deF['definition']}" %>
</button>
</h2>
<div id="collapse<%=count%>" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordion<%=count%>">
<div class="accordion-body">
<p><strong>Example:</strong> <%=deF['example']%></p>
</div>
</div>
</div>
</div>
<%else%>
<h5><%= "#{count}. #{deF['definition']}" %></h5>
<%end%>
<%end%>
<%end%>
Top comments (0)