Replicate some style and js functionality from FE setup

_sass/content.scss

@@ -48,10 +48,43 @@
 
 .note {
   @extend %call-to-action-shared;
-  border-left: 8px solid lighten($back-end-secondary, 25%);
-  background-color: lighten($back-end-primary, 40%);
+  border-left: 8px solid lighten($front-end-secondary, 25%);
+  background-color: lighten($front-end-primary, 40%);
+}
+
+.answer {
+  @extend %call-to-action-shared;
+  border-left: 8px solid #CCC;
+
+  h3 {
+    cursor: pointer;
+  }
+}
+
+.expander-arrow {
+  cursor: pointer;
+  transform: rotate(0deg);
+  transition: transform 0.2s ease;
+  height: 15px;
+  width: 15px;
+}
+
+.expander-arrow.expanded {
+  transform: rotate(90deg);
+  transition: transform 0.2s ease;
 }
 
 .google-form {
   border: none;
 }
+
+.mod-description {
+  color: #666;
+  font-size: 0.9em;
+  width: 70%;
+}
+
+.wide-text {
+  width: 100%;
+  font-family: monospace;
+}

public/js/expander.js

@@ -0,0 +1,19 @@
+
+$('.answer h3').each(function(idx, title) {
+    const titleText = $(title).text();
+    $(title).replaceWith(`<h3><img class="expander-arrow" src="/assets/images/arrow.svg" alt="expander arrow" /> ${titleText}</h3>`);
+  });
+
+  $('.answer h3').nextAll().hide();
+
+  $('.answer h3').on('click', function() {
+    let arrowEl = $(this).find('img.expander-arrow');
+
+    if (!arrowEl.hasClass('expanded')) {
+      arrowEl.addClass('expanded');
+      arrowEl.parent('h3').nextAll().show(150);
+    } else {
+      arrowEl.removeClass('expanded');
+      arrowEl.parent('h3').nextAll().hide(150);
+    }
+  });