accordion-style FAQ page

assets/_src/js/ascribe.js

@@ -2,7 +2,7 @@
 $(document).ready(function(){
 
     slider();
-    featuredFAQ();
+    faqToggle();
     marketplaces();
     tourNav();
     mobileNav();
@@ -40,8 +40,8 @@ $(document).ready(function(){
         });
     }
 
-    function featuredFAQ() {
-        $('.faq--featured .faq__question').click(function() {
+    function faqToggle() {
+        $('.faq__question').click(function() {
             $(this).toggleClass('open');
             $(this).next('.faq__answer').toggleClass('open');
         });

assets/_src/less/ascribe/_faq.less

@@ -1,37 +1,20 @@
 
 .subtemplate--faq {
-
+    padding-top: @spacer;
+    padding-bottom: @spacer;
 }
 
 .faq {
-    // reset default dl,dt,dd styles
-    &,
-    .faq__answer {
-        margin: 0;
-        padding: 0;
-    }
-
+    margin-left: 20px;
 }
 
 .faq__title { margin-top: 0; }
 
 .faq__question {
-    &:extend(.h4);
+    &:extend(.bold);
     display: block;
+    margin-top: 0;
     margin-bottom: (@spacer / 2);
-}
-
-.faq__answer {
-    &:not(:last-child) {
-        margin-bottom: @spacer;
-    }
-}
-
-.faq--featured {
-    margin-left: 20px;
-
-    .faq__question {
-        color: @pink;
     cursor: pointer;
 
     .caret {
@@ -45,17 +28,21 @@
 }
 
 .faq__answer {
-        transition: .2s ease-out;
-        height: 0;
-        opacity: 0;
+    display: none;
     margin-bottom: @spacer;
+    margin-left: 0;
 
     &.open {
-            height: 100%;
-            opacity: 1;
+        display: block;
         max-height: 800px;
     }
 }
+
+
+.faq--featured {
+    .faq__question {
+        color: @pink;
+    }
 }
 
 .caret {

controller/classes/Subtemplate.php

@@ -684,7 +684,7 @@ class Subtemplate {
                 $question    = get_sub_field('question');
                 $answer      = get_sub_field('answer');
 
-                $regularFAQ .= "<dt class='faq__question'>{$question}</dt>
+                $regularFAQ .= "<dt class='faq__question'><i class='caret'></i> {$question}</dt>
                                 <dd class='faq__answer'>{$answer}</dd>";
             }