hiding showing raw data

app/assets/javascripts/application.js

@@ -12,5 +12,6 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require bootstrap
 //= require turbolinks
 //= require_tree .

app/views/questions/_question.html.haml

@@ -26,12 +26,14 @@
 
     .show-hide
       %p
-        %span{class: 'toggle', data: {toggle: 'histogram-answers'}}= "<span class='toggle'>Show</span> Histogram".html_safe
+        %a{"aria-controls" => "histogram#{question.id}", "aria-expanded" => "false", "data-toggle" => "collapse", :href => "#histogram#{question.id}"}
+          = "<span class='toggle'>Show</span> Histogram".html_safe
         &nbsp; | &nbsp;
-        %span{class: 'toggle', data: {toggle: 'raw'}}= "<span class='toggle'>Show</span> Raw Data".html_safe
+        %a{"aria-controls" => "raw-data#{question.id}", "aria-expanded" => "false", "data-toggle" => "collapse", :href => "#raw-data#{question.id}"}
+          = "<span class='toggle'>Show</span> Raw Data".html_safe
 
-      .histogram-answers.hidden
+      .collapse{id: "histogram#{question.id}"}
         = render 'shared/histogram', data: aggregated_responses
 
-      %p.raw.hidden
+      %p.collapse{id: "raw-data#{question.id}"}
         = aggregated_responses.responses.map(&:answer_index).join(', ')