Expand collapse 3

app/assets/stylesheets/earthworks.css

@@ -164,6 +164,21 @@ Uncomment lines 142-144
   --bs-pagination-focus-bg: none;
   --bs-pagination-focus-box-shadow: none;
 }
+
+/* Styles for search result description expand/collapse */
+
+.expand-collapse .btn-outline-secondary {
+  display: flex;
+  &.active {
+    color: white;
+    background-color:var(--stanford-cardinal);
+  }
+}
+
+.expand-collapse i {
+  align-self: center;
+}
+
 /* Styles for code snippet */
 
 .code-snippet-content {

app/components/earthworks/search_result_component.html.erb

@@ -24,7 +24,7 @@
     <% end %>
   <% end %>
   <div class='more-info-area border-bottom'>
-    <div id="doc-<%= @document.id %>-fields-collapse" class='collapse'>
+    <div id="doc-<%= @document.id %>-fields-collapse" class='collapse description' data-controller="description">
       <small itemprop="description">
         <%= index_fields_display %>
       </small>

app/javascript/controllers/description_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    expand() {
+        this.element.classList.remove("collapse");
+    }
+
+    collapse() {
+        this.element.classList.add("collapse");
+    }
+}

app/javascript/controllers/expandcollapse_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static outlets = ["description"]
+  static targets = ["expandButton", "collapseButton"]
+
+  expandDescriptions() {
+    this.descriptionOutlets.forEach(description => {
+      description.expand();
+    });
+
+    this.toggleButtonStates();
+  }
+
+
+  collapseDescriptions() {
+    this.descriptionOutlets.forEach(description => {
+      description.collapse();
+    });
+
+    this.toggleButtonStates();
+  }
+
+  toggleButtonStates() {
+    this.expandButtonTarget.classList.toggle("active");
+    this.collapseButtonTarget.classList.toggle("active");
+  }
+
+}

app/views/catalog/_sort_and_per_page.html.erb

@@ -0,0 +1,16 @@
+<div id="sortAndPerPage" class="sort-pagination d-md-flex justify-content-between" role="navigation" aria-label="<%= t('blacklight.search.per_page.aria_label')%>">
+  <%= render partial: "paginate_compact", object: @response if show_pagination? %>
+  <div class="search-widgets">
+    <%= render_results_collection_tools %>
+    <div class="expand-collapse btn-group" data-controller="expandcollapse" data-expandcollapse-description-outlet=".description">
+      <label class="btn btn-outline-secondary active" aria-label="collapse descriptions" data-expandcollapse-target="expandButton">
+        <input type="radio" class="d-none" name="expandcollapse" value="collapse" data-action="expandcollapse#collapseDescriptions" selected>
+        <i class="bi bi-list-ul"></i>
+      </label>
+      <label class="btn btn-outline-secondary" aria-label="expand descriptions"  data-expandcollapse-target="collapseButton">
+        <input type="radio" class="d-none" name="expandcollapse" value="expand" data-action="expandcollapse#expandDescriptions">
+        <i class="bi bi-text-paragraph"></i>
+      </label>
+    </div>
+  </div>
+</div>