Create AccordionList macro and vue component to collapse multiple accordion components

js/components/accordion.js

@@ -11,4 +11,10 @@ export default {
       default: false,
     },
   },
+
+  methods: {
+    collapse: function() {
+      this.isVisible = false
+    }
+  }
 }

js/components/accordion_list.js

@@ -0,0 +1,16 @@
+import Accordion from './accordion'
+
+export default {
+  name: 'accordion-list',
+
+  components: {
+    Accordion
+  },
+
+  methods: {
+    handleClick: function(e) {
+      e.preventDefault()
+      this.$children.forEach(el => el.collapse())
+    }
+  }
+}

styles/elements/_accordions.scss

@@ -47,4 +47,8 @@
       }
     }
   }
+
+  &-list {
+    max-width: $max-panel-width;
+  }
 }

templates/components/accordion_list.html

@@ -0,0 +1,11 @@
+{% macro AccordionList() %}
+  <accordion-list inline-template>
+    <div class="accordion-list">
+      <div class="action-group">
+        <a v-on:click="handleClick($event)">Collapse All</a>
+      </div>
+      <!-- caller iterates over accordion vue components or Accordion jinja macros -->
+      {{ caller() }}
+    </div>
+  </accordion-list>
+{% endmacro %}

templates/task_orders/index.html

@@ -1,4 +1,5 @@
 {% from "components/accordion.html" import Accordion %}
+{% from "components/accordion_list.html" import AccordionList %}
 {% from "components/empty_state.html" import EmptyState %}
 {% from "components/icon.html" import Icon %}
 {% from "components/sticky_cta.html" import StickyCTA %}
@@ -62,9 +63,11 @@
 <div class="portfolio-funding">
 
   {% if task_orders  %}
-    {% for status, to_list in task_orders.items() %}
+    {% call AccordionList() %}
-      {{ TaskOrderList(to_list, status.value) }}
+      {% for status, to_list in task_orders.items() %}
-    {% endfor %}
+        {{ TaskOrderList(to_list, status.value) }}
+      {% endfor %}
+    {% endcall %}
   {% else %}
     {{ EmptyState(
       header="task_orders.empty_state.header"|translate,