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');
}); });

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

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

2
controller/classes/Subtemplate.php
View File

@ -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>";
} }