refactor FAQ styles & markup

assets/_src/js/ascribe.js

@@ -39,11 +39,14 @@ $(document).ready(function(){
 
         });
     }
+
     function featuredFAQ() {
-        $('.featured-faqs dt').click(function() {
+        $('.faq--featured .faq__question').click(function() {
-            $(this).next('dd').toggleClass('open');
+            $(this).toggleClass('open');
+            $(this).next('.faq__answer').toggleClass('open');
         });
     }
+
     function marketplaces() {
         $('.top-tab').click(function(){
             $('.top-tab').removeClass('active');

assets/_src/less/ascribe.less

@@ -31,6 +31,7 @@
 @import 'ascribe/_team.less';
 @import 'ascribe/_blog.less';
 @import 'ascribe/_testimonials.less';
+@import 'ascribe/_faq.less';
 
 @import '_page-api.less';
 
@@ -372,45 +373,6 @@
     }
 }
 
-.faq {
-
-    > h1 { margin-top: 0; }
-
-    dl,dt,dd {
-        margin: 0;
-        padding: 0;
-    }
-
-    dd:not(:last-child) {
-        margin-bottom: @spacer;
-    }
-
-    dt {
-        &:extend(.bold);
-    }
-
-    .featured-faqs {
-
-        dt {
-            color: @pink;
-            cursor: pointer;
-        }
-        dd {
-            max-height:0;
-            overflow-y:hidden;
-            transition: .2s ease-out;
-            margin-bottom: @spacer;
-
-            &.open {
-                max-height: 800px;
-            }
-        }
-    }
-    .regular-faqs {
-
-    }
-}
-
 
 .values {
     padding-bottom: @spacer;

assets/_src/less/ascribe/_faq.less

@@ -0,0 +1,69 @@
+
+.subtemplate--faq {
+
+}
+
+.faq {
+    // reset default dl,dt,dd styles
+    &,
+    .faq__answer {
+        margin: 0;
+        padding: 0;
+    }
+
+}
+
+.faq__title { margin-top: 0; }
+
+.faq__question {
+    &:extend(.h4);
+    display: block;
+    margin-bottom: (@spacer / 2);
+}
+
+.faq__answer {
+    &:not(:last-child) {
+        margin-bottom: @spacer;
+    }
+}
+
+.faq--featured {
+    margin-left: 20px;
+
+    .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;
+        }
+    }
+}
+
+.caret {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 5px 0 5px 6px;
+    border-color: transparent transparent transparent @greySocial;
+    transition: .2s ease-out;
+}

controller/classes/Subtemplate.php

@@ -654,18 +654,21 @@ class Subtemplate {
     //
     public function faq($subtemplateTitle) {
 
+        $featuredFAQ = '';
+        $regularFAQ  = '';
+
         if (have_rows('featured_faqs')) {
 
-            $featuredFAQ = '<dl class="featured-faqs">';
+            $featuredFAQ = '<dl class="faq faq--featured">';
 
             while (have_rows('featured_faqs')) {
                 the_row();
 
-                $question          = get_sub_field('question');
+                $question     = get_sub_field('question');
-                $answer          = get_sub_field('answer');
+                $answer       = get_sub_field('answer');
 
-                $featuredFAQ .= "<dt>{$question}</dt>
+                $featuredFAQ .= "<dt class='faq__question'><i class='caret'></i>{$question}</dt>
-                                <dd>{$answer}</dd>";
+                                <dd class='faq__answer'>{$answer}</dd>";
             }
 
             $featuredFAQ .= "</dl>";
@@ -673,23 +676,23 @@ class Subtemplate {
 
         if (have_rows('regular_faqs')) {
 
-            $regularFAQ = '<dl class="regular-faqs">';
+            $regularFAQ = '<dl class="faq faq--regular">';
 
             while (have_rows('regular_faqs')) {
                 the_row();
 
-                $question          = get_sub_field('question');
+                $question    = get_sub_field('question');
-                $answer          = get_sub_field('answer');
+                $answer      = get_sub_field('answer');
 
-                $regularFAQ .= "<dt>Q: {$question}</dt>
+                $regularFAQ .= "<dt class='faq__question'>{$question}</dt>
-                                <dd>A: {$answer}</dd>";
+                                <dd class='faq__answer'>{$answer}</dd>";
             }
 
             $regularFAQ .= "</dl>";
         }
 
-        $result = "<section class='subtemplate row row--content content faq'>
+        $result = "<section class='subtemplate row row--content content subtemplate--faq'>
-                        <h1>{$subtemplateTitle}</h1>
+                        <h1 class='faq__title'>{$subtemplateTitle}</h1>
                         {$featuredFAQ}
                         {$regularFAQ}
                     </section>";