Bootstrap Collapse with Haml and Rails

Question

I'm quite new to rails / programing etc so I apologise if this is very basic.

I'm trying to get the twitter bootstrap collapse js working on my web app. I have tried to follow the structure here http://getbootstrap.com/javascript/#collapse.

Here is my attempt with view code:

http://accseportfolio.herokuapp.com/items

    - @items.each do |item|
      .panel-group{:id => "accordian"}
        .panel.panel-default
          .panel-heading
            %h4.panel-title
              %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "#collapseOne"}
                = item.code
          #collapseOne.panel-collapse.collapse.in
            .panel-body
              = item.name
        .panel.panel-default
          .panel-heading
            %h4.panel-title
              %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "#collapseOne"}

However as you can see there are two issues:

1. Only the first item collapses. Clicking on any of the item links will only collapse the first. I think this is because I need to add a CSS selector for each item in the each loop but I can't figure out how.

2. The CSS for the panels is missing.

Many thanks for your help

Thanks to sircapsalot for putting me on the right track the following now works

      - @items.each do |item|
        #accordion.panel-group
          .panel.panel-default
            .panel-heading
              %h4.panel-title
                %a.accordion-toggle{"data-parent" => "#accordian", "data-toggle" => "collapse", :href => "#collapse#{item.code}"}
                  Title
            .panel-collapse.collapse.in{:id => "collapse#{item.code}"}
              .panel-body
                Some example text

Answer 1

Well, I just have made it work for me. In my case, I have to present "routes" grouped by "regions". My code is:

  .panel-group{:id => "accordian"}
    - @route_regions.each do |region, routes|
      .panel.panel-default
        .panel-heading
          %h4.panel-title
            %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "##{region}"}
              = raw region
        .panel-collapse.collapse{:id => "#{region}"}
          .panel-body
            %ul#routes
              - routes.each do |route|
                %li
                  = link_to route.name, refinery.routes_route_path(route)

The problem of your gists and previous answer was that you have to put it like this: :href => "##{region}"in the link.

FYI, I add how I grouped the routes by regions, getting the @route_regions variable:

@route_regions = @routes.group_by {|route| route.region}

Hopes this help for future readers as I had this problem.

Answer 2

You are specifying only to collapse the #collapseOne element. Therefore, clicking any of them will collapse the first one.

You need to insert dynamic ID's to collapse like this.

- @items.each do |item|
      .panel-group{:id => "accordian"}
        .panel.panel-default
          .panel-heading
            %h4.panel-title
              %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "#collapseOne"}
                = item.code
          %div{:id => "#collapse-#{item.name}"}.panel-collapse.collapse.in
            .panel-body
              = item.name
        .panel.panel-default
          .panel-heading
            %h4.panel-title
              %a.accordion-toggle{"data-toggle" => "collapse", "data-parent" => "#accordion", :href => "#collapse-#{item.name}"}