  <div class="typeD" id="typeD2">
  <% @data.each do |row_data| %>
    <div class="typeD-group">
      <div class="typeD-heading">
         <% @frontend_field_names.each_with_index do |field,index| %>
            <% if index == 0 %>
              <span class="category">
                <%= link_to_field(row_data,field, @frontend_sat_to_links[index],{orig_page: @page_id.to_s}) unless field.blank? %>
              </span>
            <% else %>
              <a href="<%= row_data.id.to_s %>" class="typeD-toggle"> <%= row_data.title %> </a>
            <% end %>
       <% end %>
      </div>
      <div data-jump="<%= row_data.id.to_s %>" class="typeD-body" style="display:none;">
        <div class="typeD-inner">
          <%= row_data.answer.html_safe %>
        </div>
      </div>
    </div>
<% end %>
</div>
<script type="text/javascript">
  $("#typeD2 a.typeD-toggle").click(function(){
    collapse($(this).attr("href"));
    return false;
  })

  var collapse = function(answer){
    var element_to_hide = $("div[data-jump=" + answer + "]");
    $("#typeD2 div.typeD-body").slideUp();
    $('.typeD-heading').removeClass("in");
    if(!element_to_hide.hasClass("in")){
      $("#typeD2 div.typeD-body").removeClass("in");
      element_to_hide.addClass("in").siblings('.typeD-heading').addClass("in");
      element_to_hide.slideDown();
      window.location.hash = answer;
    }else{
      element_to_hide.removeClass("in");
    }
  }

  if(window.location.hash)
    collapse(window.location.hash.replace("#",""));
</script>
<style type="text/css">
  .typeD .typeD-group {
    margin-bottom: 0.5em;
  }
  .typeD .typeD-group .typeD-heading {
    line-height: 3em;
    padding: 0.5em 0.8em;
    background-color: #efefef;
    border-radius: 0.3em;
    border-bottom: none;
  }
  .typeD .typeD-group .typeD-heading.in {
    border-radius: 0.3em 0.3em 0 0;
    border-bottom: 1px solid #d9cbc4;
  }
  .typeD .typeD-group .typeD-heading .category {
    padding-right: 0.5em;
    margin-right: 0.5em;
    font-size: 1.2em;
    display: inline-block;
    font-weight: 700;
    border-right: 1px solid #d1d1d1;
  }
  .typeD .typeD-group .typeD-heading .category a {
    color: #3596E4;
  }
  .typeD .typeD-group .typeD-toggle {
    font-size: 1.4em;
    font-weight: 800;
    color: #878787;
  }
  .typeD .typeD-group .typeD-body {
    padding: 1em;
    border-color: #efefef;
    border-style: solid;
    border-width: 0 1px 1px;
    border-radius: 0 0 0.3em 0.3em;
  }
  .typeD .typeD-group .typeD-inner {
    line-height: 1.2em;
    font-size: 1.2em;
  }
  .typeD .typeD-group .typeD-toggle:hover {
    color: #0f5387;
  }
</style>