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,60 +1,47 @@
 
 .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);
+    cursor: pointer;
+
+    .caret {
+        margin-left: -20px;
+        margin-right: 10px;
+    }
+
+    &.open .caret {
+        transform: rotate(90deg);
+    }
 }
 
 .faq__answer {
-    &:not(:last-child) {
-        margin-bottom: @spacer;
+    display: none;
+    margin-bottom: @spacer;
+    margin-left: 0;
+
+    &.open {
+        display: block;
+        max-height: 800px;
     }
 }
 
-.faq--featured {
-    margin-left: 20px;
 
+.faq--featured {
     .faq__question {
         color: @pink;
-        cursor: pointer;
-
-        .caret {
-            margin-left: -20px;
-            margin-right: 10px;
-        }
-
-        &.open .caret {
-            transform: rotate(90deg);
-        }
-    }
-
-    .faq__answer {
-        transition: .2s ease-out;
-        height: 0;
-        opacity: 0;
-        margin-bottom: @spacer;
-
-        &.open {
-            height: 100%;
-            opacity: 1;
-            max-height: 800px;
-        }
     }
 }
 

controller/classes/Subtemplate.php

@@ -667,7 +667,7 @@ class Subtemplate {
                 $question     = get_sub_field('question');
                 $answer       = get_sub_field('answer');
 
-                $featuredFAQ .= "<dt class='faq__question'><i class='caret'></i>{$question}</dt>
+                $featuredFAQ .= "<dt class='faq__question'><i class='caret'></i> {$question}</dt>
                                 <dd class='faq__answer'>{$answer}</dd>";
             }
 
@@ -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>";
             }