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

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more