DEV Community

Cover image for Ruby Sinatra Bootstrap view accordion
Adolfo Nava
Adolfo Nava

Posted on

Ruby Sinatra Bootstrap view accordion

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%>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)