ascribe/wp-theme
1
0
Fork 0
mirror of https://github.com/ascribe/wp-theme synced 2024-12-22 09:13:38 +01:00
Code Issues Releases Wiki Activity

accordion-style FAQ page

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-03-12 16:42:07 +01:00
parent f5f61168fa
commit b6cb4ecb5d
3 changed files with 28 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/_src/js/ascribe.js
View File

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

59
assets/_src/less/ascribe/_faq.less
View File

@ -1,60 +1,47 @@
.subtemplate--faq { .subtemplate--faq {
padding-top: @spacer;
padding-bottom: @spacer;
} }
.faq { .faq {
// reset default dl,dt,dd styles margin-left: 20px;
&,
.faq__answer {
margin: 0;
padding: 0;
}
} }
.faq__title { margin-top: 0; } .faq__title { margin-top: 0; }
.faq__question { .faq__question {
&:extend(.h4); &:extend(.bold);
display: block; display: block;
margin-top: 0;
margin-bottom: (@spacer / 2); margin-bottom: (@spacer / 2);
cursor: pointer;
.caret {
margin-left: -20px;
margin-right: 10px;
}
&.open .caret {
transform: rotate(90deg);
}
} }
.faq__answer { .faq__answer {
&:not(:last-child) { display: none;
margin-bottom: @spacer; margin-bottom: @spacer;
margin-left: 0;
&.open {
display: block;
max-height: 800px;
} }
} }
.faq--featured {
margin-left: 20px;
.faq--featured {
.faq__question { .faq__question {
color: @pink; 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;
}
} }
} }

4
controller/classes/Subtemplate.php
View File

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