Use Stimulus targets for expand collapse button styles

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 {
@@ -199,18 +214,3 @@ Uncomment lines 142-144
   color: var(--stanford-digital-blue-dark) !important;
   border-color: var(--stanford-digital-blue-dark) !important;
 }
-
-/* 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;
-}
-

app/javascript/controllers/description_controller.js

@@ -1,4 +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

@@ -1,16 +1,29 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static outlets = [ "description" ]
-  toggleDescriptions(evt) {
-    const activeClass = 'active'
-    const currentActive = this.element.querySelector(`.${activeClass}`)
-    currentActive.classList.remove(activeClass)
-    currentActive.disabled = false;
-    evt.currentTarget.disabled = true;
-    evt.currentTarget.classList.add(activeClass)
-    this.descriptionOutletElements.forEach(function(element) {
-      element.classList.toggle("collapse");
+  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

@@ -3,14 +3,14 @@
   <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" disabled data-action="expandcollapse#toggleDescriptions">
-        <input type="radio" class="d-none" name="expandcollapse" value="collapse" selected data-action="expandcollapse#toggleDescriptions">
+      <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-action="expandcollapse#toggleDescriptions">
-        <input type="radio" class="d-none" name="expandcollapse" value="expand" data-action="expandcollapse#toggleDescriptions">
+      <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>
+</div>