FAQ WordPress Page with ACF and jQuery

enqueue-functions.php

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

faq-page-acf-markup.php

<?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;
}
}

faq-pagetemplate-acf-markup.php

<?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();

faq.css

#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;
}

faq.js

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