Last active
September 2, 2017 05:53
-
-
Save neilgee/8effc371b8751f81b870 to your computer and use it in GitHub Desktop.
FAQ WordPress Page with ACF and jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php // <- don't add the opening php tag in | |
function themprefix_faq_script() { | |
if(is_single('11321')) {//add in your Post/Page ID - if this is a page use - is_page - instead of is_single | |
wp_enqueue_script( 'faq-js', get_stylesheet_directory_uri() . '/js/faq.js', array('jquery'), '1', true ); | |
wp_enqueue_style ( 'faq-css' , get_stylesheet_directory_uri() . '/css/faq.css', '', '1', 'all' ); | |
wp_enqueue_style ( 'fontawesome' , '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', '' , '4.3.0', 'all' ); | |
} | |
} | |
add_action( 'wp_enqueue_scripts', 'themprefix_faq_script' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php //<~ don't add in functions.php | |
add_action( 'fl_post_bottom_meta_open', 'wpb_faq_repeater_page', 10 );//Position FAQs after post content - change your hook to suit | |
function wpb_faq_repeater_page () { | |
if( is_single( 11321 )) { //change post id to suit | |
// My ACF Fields for reference | |
// faqs - field group | |
// faq_question - sub-field | |
// faq_answer - sub-field | |
// check if the repeater field has rows of data | |
if( have_rows('faq') ): | |
// loop through the rows of data | |
while ( have_rows('faq') ) : the_row(); | |
// display a sub field value | |
echo'<div id="faq_container"> | |
<div class="faq"> | |
<div class="faq_question"> <span class="question">' . get_sub_field('faq_question') . '</span><span class="accordion-button-icon fa fa-plus"></span></div> | |
<div class="faq_answer_container"> | |
<div class="faq_answer"><span>' . get_sub_field('faq_answer') . '</span></div> | |
</div> | |
</div> | |
</div>'; | |
endwhile; | |
else : | |
// no rows found | |
endif; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* | |
Template Name:FAQ Page | |
*/ | |
add_action( 'genesis_entry_content', 'wpb_faq_repeater_page', 10 );//Position FAQs after post content | |
function wpb_faq_repeater_page () { | |
//My ACF Fields for reference | |
//faqs - field group | |
//faq_question - sub-field | |
//faq_answer - sub-field | |
// check if the repeater field has rows of data | |
if( have_rows('faq') ): | |
// loop through the rows of data | |
while ( have_rows('faq') ) : the_row(); | |
// display a sub field value | |
echo'<div id="faq_container"> | |
<div class="faq"> | |
<div class="faq_question"> <span class="question">' . get_sub_field('faq_question') . '</span><span class="accordion-button-icon fa fa-plus"></span></div> | |
<div class="faq_answer_container"> | |
<div class="faq_answer"><span>' . get_sub_field('faq_answer') . '</span></div> | |
</div> | |
</div> | |
</div>'; | |
endwhile; | |
else : | |
// no rows found | |
endif; | |
} | |
genesis(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#faq_container { | |
border: 1px solid #e5e5e5; | |
margin-bottom: 10px; | |
padding: 10px 15px; | |
} | |
.faq_question { | |
margin: 0px; | |
padding: 0px 0px 5px 0px; | |
display: inline-block; | |
cursor: pointer; | |
font-weight: bold; | |
display: table; | |
} | |
.question { | |
margin-bottom: 5px; | |
display: table-cell; | |
width: 100%; | |
} | |
.faq_answer_container { | |
height: 0px; | |
overflow: hidden; | |
padding: 0px; | |
} | |
.accordion-button-icon { | |
display: table-cell; | |
line-height: inherit; | |
opacity: .5; | |
filter: alpha(opacity = 50); | |
padding-left: 15px; | |
vertical-align: middle; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).ready(function($) { | |
$('.faq_question').click(function() { | |
if ($(this).parent().is('.open')){ | |
$(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500); | |
$(this).closest('.faq').removeClass('open'); | |
$(this).parent().find('.accordion-button-icon').removeClass('fa-minus').addClass('fa-plus'); | |
} | |
else{ | |
var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px'; | |
$(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500); | |
$(this).closest('.faq').addClass('open'); | |
$(this).parent().find('.accordion-button-icon').removeClass('fa-plus').addClass('fa-minus'); | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment