diff --git a/source/_meta/_01-foot.twig b/source/_meta/_01-foot.twig
index 78c33c8e1cca40b83e879b716b81c8293f984803..5bfe2075ff1a08f3bef6b761652ede61c34a85f2 100644
--- a/source/_meta/_01-foot.twig
+++ b/source/_meta/_01-foot.twig
@@ -13,6 +13,7 @@
<script src="../../../js/dist/scripts.min.js?{{ cacheBuster }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js?{{ cacheBuster }}"></script>
<script src="../../../source/_patterns/04-components/facts-and-figures/facts-and-figures.js?{{ cacheBuster }}"></script>
+ <script src="../../../source/_patterns/04-components/expand-collapse/expand-collapse.js?{{ cacheBuster }}"></script>
<!--DO NOT REMOVE-->
{{ patternLabFoot | raw }}
diff --git a/source/_patterns/04-components/expand-collapse/_expand-collapse.scss b/source/_patterns/04-components/expand-collapse/_expand-collapse.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5be00d1177254cb091cf4eb49ec9d7021faaa612
--- /dev/null
+++ b/source/_patterns/04-components/expand-collapse/_expand-collapse.scss
@@ -0,0 +1,70 @@
+.uw-expand-collapse {
+ &__item {
+ display: block;
+ width: 100%;
+ }
+
+ &__controls {
+ display: grid;
+ grid-template-columns: 50% 50%;
+ }
+
+ &__button {
+ background-color: gesso-grayscale('gray-1');
+ color: gesso-grayscale('gray-2');
+ font-family: "BureauGrotCond Book",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
+ font-size: 1.125rem;
+ letter-spacing: 0.055rem;
+ padding: 0.75rem;
+ position: relative;
+ text-align: left;
+ text-transform: uppercase;
+ width: 100%;
+
+ &:hover {
+ background-color: gesso-grayscale('gray-2');
+ color: gesso-grayscale('gray-1');
+ }
+
+ &--controls {
+ text-align: center;
+ }
+
+ &--title {
+ &:hover {
+ &::after {
+ border: solid gesso-grayscale('gray-1');
+ border-width: 0 3px 3px 0;
+ }
+ }
+
+ &::after {
+ border: solid gesso-grayscale('gray-2');
+ border-width: 0 3px 3px 0;
+ content: '';
+ display: inline-block;
+ padding: 3px;
+ position: absolute;
+ right: 5%;
+ top: 40%;
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ transform-origin: 50% 50%;
+ z-index: 2;
+ }
+
+ &.uw-expanded {
+ &::after {
+ -webkit-transform: rotate(-135deg);
+ transform: rotate(-135deg);
+ }
+ }
+ }
+ }
+
+ &__text {
+ display: none;
+ font-size: 1rem;
+ padding: 1rem 2rem;
+ }
+}
diff --git a/source/_patterns/04-components/expand-collapse/expand-collapse.js b/source/_patterns/04-components/expand-collapse/expand-collapse.js
new file mode 100644
index 0000000000000000000000000000000000000000..44fd596d7d84285a76c70139aab9f06d9970fa1a
--- /dev/null
+++ b/source/_patterns/04-components/expand-collapse/expand-collapse.js
@@ -0,0 +1,65 @@
+(function ($, Drupal) {
+ Drupal.behaviors.expandcollapse = {
+ attach: function (context, settings) {
+ $(document).ready(function(){
+
+ $('.uw-expand-collapse').each(function() {
+
+ // Get the id of the expand collapse.
+ var id = '#uw-expand-collapse-' + $(this).data('id');
+
+ // When the expand all button is clicked, expand all the items.
+ $(id + ' [data-type="expand-all"]').click(function() {
+
+ // Find each of the buttons, which are the titles and change
+ // aria-expanded and add class to show expanded.
+ $(id + ' .uw-expand-collapse__items button').each(function() {
+ $(this).attr('aria-expanded', true);
+ $(this).addClass('uw-expanded');
+ });
+
+ // Find each of the text and add css to display them.
+ $(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function() {
+ $(this).css('display', 'block');
+ });
+ });
+
+ // When the collapse all button is clicked, collapse all the items.
+ $(id + ' [data-type="collapse-all"]').click(function() {
+
+ // Find each of the buttons, which are the titles and change
+ // aria-expanded and remove class to show collapsed.
+ $(id + ' .uw-expand-collapse__items button').each(function() {
+ $(this).attr('aria-expanded', true);
+ $(this).removeClass('uw-expanded');
+ });
+
+ // Find each of the text and add css to display them.
+ $(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function() {
+ $(this).css('display', 'none');
+ });
+ });
+
+ // Step through each of the titles and add a click function.
+ $(id + ' .uw-expand-collapse__items button').click(function() {
+
+ // If this has an expanded class, remove it and change aria expanded to false.
+ // Otherwise add the expanded class and set aria-expanded to true.
+ if ($(this).hasClass('uw-expanded')) {
+ $(this).attr('aria-expanded', false);
+ $(this).removeClass('uw-expanded');
+ }
+ else {
+ $(this).attr('aria-expanded', true);
+ $(this).addClass('uw-expanded');
+ }
+
+ // Toggle the text to show/hide.
+ $(this).parent().parent().find('.uw-expand-collapse__text').toggle();
+ })
+ });
+
+ });
+ }
+ };
+})(jQuery, Drupal);
diff --git a/source/_patterns/04-components/expand-collapse/expand-collapse.md b/source/_patterns/04-components/expand-collapse/expand-collapse.md
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/source/_patterns/04-components/expand-collapse/expand-collapse.twig b/source/_patterns/04-components/expand-collapse/expand-collapse.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e282e231d75e3227fbbbee610413dcb9a8ae288d
--- /dev/null
+++ b/source/_patterns/04-components/expand-collapse/expand-collapse.twig
@@ -0,0 +1,20 @@
+<div id="uw-expand-collapse-{{ id }}" class="uw-expand-collapse" data-id="{{ id }}">
+ <div class="uw-expand-collapse__controls">
+ <button class="uw-expand-collapse__button uw-expand-collapse__button--controls" data-type="expand-all">Expand All</button>
+ <button class="uw-expand-collapse__button uw-expand-collapse__button--controls" data-type="collapse-all">Collapse All</button>
+ </div>
+ <div class="uw-expand-collapse__items">
+ {% for ec in ecs %}
+ <div class="uw-expand-collapse__item">
+ <h2>
+ <button aria-expanded="false" class="uw-expand-collapse__button uw-expand-collapse__button--title" data-type="title">
+ {{ ec.title }}
+ </button>
+ </h2>
+ <div class="uw-expand-collapse__text">
+ {{ ec.text }}
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+</div>
diff --git a/source/_patterns/04-components/expand-collapse/expand-collapse.yml b/source/_patterns/04-components/expand-collapse/expand-collapse.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fa841d15cc5f0807d707e7b1f44f805b208a20e1
--- /dev/null
+++ b/source/_patterns/04-components/expand-collapse/expand-collapse.yml
@@ -0,0 +1,11 @@
+id: '444-23245as3-424'
+ecs:
+ -
+ title: 'Title #1'
+ text: 'Text #1'
+ -
+ title: 'Title #2'
+ text: 'Text #2'
+ -
+ title: 'Title #3'
+ text: 'Text #3'