Use bootstrap for reveal/collapse contact form

This provides better accessibility (aria-expanded) than our custom solution

Author: jcoyne

app/assets/javascripts/spotlight/application.js

@@ -1,5 +1,4 @@
 #report-problem-form {
-  display: none;
   border-bottom: 1px solid $gray-600;
 
   h2 {

app/assets/javascripts/spotlight/spotlight.esm.js

@@ -1,15 +1,13 @@
 import BrowseGroupCateogries from 'spotlight/user/browse_group_categories'
 import Carousel from 'spotlight/user/carousel'
 import ClearFormButton from 'spotlight/user/clear_form_button'
-import ReportProblem from 'spotlight/user/report_a_problem'
 import ZprLinks from 'spotlight/user/zpr_links'
 
 export default class {
   connect() {
     new BrowseGroupCateogries().connect()
     new Carousel().connect()
     new ClearFormButton().connect()
-    new ReportProblem().connect()
     new ZprLinks().connect()
   }
 }

app/assets/javascripts/spotlight/spotlight.esm.js.map

@@ -1,5 +1,5 @@
 <% if show_contact_form? && (current_exhibit.nil? || !current_page?(spotlight.new_exhibit_contact_form_path(current_exhibit))) %>
-  <div id="report-problem-form">
+  <div id="report-problem-form" class="collapse">
     <%= render 'spotlight/shared/report_a_problem' %>
   </div>
 <% end %>

app/assets/javascripts/spotlight/spotlight.js

@@ -47,7 +47,9 @@
   <% end %>
   <% if current_exhibit and show_contact_form? %>
     <li class="nav-item">
-      <%= link_to t('spotlight.header_links.contact'), spotlight.new_exhibit_contact_form_path(current_exhibit), data: {behavior: 'contact-link', target: 'report-problem-form' }, class: 'nav-link' %>
+      <%= link_to t('spotlight.header_links.contact'), spotlight.new_exhibit_contact_form_path(current_exhibit),
+        data: { bs_toggle: 'collapse', bs_target: '#report-problem-form' },
+        class: 'nav-link' %>
     </li>
   <% end %>
 </ul>