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

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

@ -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 {
@ -42,19 +25,23 @@
&.open .caret {
transform: rotate(90deg);
}
}
}
.faq__answer {
transition: .2s ease-out;
height: 0;
opacity: 0;
.faq__answer {
display: none;
margin-bottom: @spacer;
margin-left: 0;
&.open {
height: 100%;
opacity: 1;
display: block;
max-height: 800px;
}
}
.faq--featured {
.faq__question {
color: @pink;
}
}

4
controller/classes/Subtemplate.php
View File

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