diff --git a/app/assets/stylesheets/darkswarm/collapsible.css.scss b/app/assets/stylesheets/darkswarm/collapsible.css.scss
new file mode 100644
index 00000000000..fdabb08ce5d
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/collapsible.css.scss
@@ -0,0 +1,52 @@
+// A bit arbitrary, works for it's use at time of implementation
+$collapsible-max-height: 350px;
+
+.collapsible-checkbox {
+  display: none;
+}
+
+.collapsible-label > ::before {
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid currentColor;
+  border-top: 5px solid transparent;
+
+  content: ' ';
+  display: inline-block;
+
+  margin-right: .7rem;
+  transform: translateY(-2px);
+  transition: transform .2s ease-out;
+
+  vertical-align: middle;
+}
+
+.collapsible-content {
+  max-height: 0;
+  overflow: hidden;
+
+  transition: max-height .25s ease-in-out;
+}
+
+.collapsible-checkbox:checked + .collapsible-label + .collapsible-content {
+  max-height: $collapsible-max-height;
+}
+
+.collapsible-checkbox:checked + .collapsible-label > ::before {
+  transform: rotate(90deg) translateX(-3px);
+}
+
+@media only screen and (min-width: 1025px) {
+  // This double class is used to so this rule is more specific than the one in
+  // all.scss
+  .collapsible-label.collapsible-label-md {
+    margin-left: 0;
+  }
+
+  .collapsible-label-md > ::before {
+    display: none;
+  }
+
+  .collapsible-content-md {
+    max-height: $collapsible-max-height;
+  }
+}
diff --git a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
index 3a9d3854410..e6baba33935 100644
--- a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
+++ b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
@@ -1,4 +1,5 @@
 @import '../base/colors';
+@import '../collapsible';
 
 // Styling for login modal to style tabs
 .reveal-modal.login-modal {
@@ -23,3 +24,10 @@
     }
   }
 }
+
+@media only screen and (min-width: 1025px) {
+  // make sure styling doesn't get messed up if resizing down and back up
+  .collapsible-menus-container {
+    min-height: 250px;
+  }
+}
diff --git a/app/views/registration/steps/_introduction.html.haml b/app/views/registration/steps/_introduction.html.haml
index 84bbb9840e5..91150145937 100644
--- a/app/views/registration/steps/_introduction.html.haml
+++ b/app/views/registration/steps/_introduction.html.haml
@@ -8,29 +8,34 @@
             %i.ofn-i_040-hub
           = t(".registration_intro")
 
-  .row{ 'data-equalizer' => true }
+  .row.collapsible-menus-container{ 'data-equalizer' => true }
     .small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true }
-      %h5= t(".registration_checklist")+":"
-      %ul.check-list
-        %li
-          = t(".registration_time")
-        %li
-          = t(".registration_enterprise_address")
-        %li
-          = t(".registration_contact_details")
-        %li
-          = t(".registration_logo")
-        %li
-          = t(".registration_promo_image")
-        %li
-          = t(".registration_about_us")
+      %input#collapsible-registration-checklist.collapsible-checkbox{:type => "checkbox"}
+      %label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-checklist"}
+        %h5= t(".registration_checklist")
+      .collapsible-content.collapsible-content-md
+        %ul.check-list
+          %li
+            = t(".registration_time")
+          %li
+            = t(".registration_enterprise_address")
+          %li
+            = t(".registration_contact_details")
+          %li
+            = t(".registration_logo")
+          %li
+            = t(".registration_promo_image")
+          %li
+            = t(".registration_about_us")
 
     .small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true}
-      %h5
-        = t(".registration_outcome_headline")
-      %p= t(".registration_outcome1_html")
-      %p= t(".registration_outcome2")
-      %p= t(".registration_outcome3")
+      %input#collapsible-registration-outcome.collapsible-checkbox{:type => "checkbox"}
+      %label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-outcome"}
+        %h5= t(".registration_outcome_headline")
+      .collapsible-content.collapsible-content-md
+        %p= t(".registration_outcome1_html")
+        %p= t(".registration_outcome2")
+        %p= t(".registration_outcome3")
 
   .row{'ng-init' => "tos_required=#{Spree::Config.enterprises_require_tos}" }
     %hr
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 6ec88c03fd2..bc6010d8450 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1822,7 +1822,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
       introduction:
         registration_greeting: "Hi there!"
         registration_intro: "You can now create a profile for your Producer or Hub"
-        registration_checklist: "You'll need"
+        registration_checklist: "What do I need?"
         registration_time: "5-10 minutes"
         registration_enterprise_address: "Enterprise address"
         registration_contact_details: "Primary contact details"