ACF FAQ sections

functions.php

// Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
}

jquery.collapse.init.js

jQuery(function( $ ){
 
	$(".faqs").collapse({
		// options...
		query: 'div h3',
		open: function() {
			this.slideDown(150);
		},
		close: function() {
			this.slideUp(150);
		}
	});
 
	$("#btn-open-all").click(function() {
		$(".faqs").trigger("open");
	});
 
	$("#btn-close-all").click(function() {
		$(".faqs").trigger("close");
	});
 
});

page-faq.php

<?php

add_filter( 'body_class', 'sk_faq_body_class' );
/**
 * Adds a css class to the body element
 *
 * @param  array $classes the current body classes
 * @return array $classes modified classes
 */
function sk_faq_body_class( $classes ) {
	$classes[] = 'no-post-edit-link';
	return $classes;
}

add_action( 'genesis_entry_content', 'sk_faqs_repeater' );
function sk_faqs_repeater() {
	// check if the repeater field has rows of data
	if( have_rows( 'faq' ) ) { ?>
 
		<div class="open-close-btns">
			<button id="btn-open-all">Open all</button> <span class="pipe">|</span> <button id="btn-close-all">Close all</button>
		</div>
 
		<?php echo '<div class="faqs">';

		// loop through the rows of data
		while ( have_rows( 'faq' ) ) : the_row(); ?>
			<div class="faq">
				<h3 class="question">
				<!-- <h3 class="question open"> -->
					<?php the_sub_field( 'question' ); ?>
				</h3>
 
				<div class="answer">
					<?php the_sub_field( 'answer' ); ?>
				</div>
			</div>
 
			<?php

		endwhile;

		echo '</div>';
	}

	else {
		// no rows found
	}

}

// Enqueue jQuery Collapse
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
	wp_enqueue_script( 'jquery-collapse', get_stylesheet_directory_uri() . '/js/jquery.collapse.js', array( 'jquery' ), '', true );

	wp_enqueue_script( 'collapse-init', get_stylesheet_directory_uri() . '/js/jquery.collapse.init.js', array( 'jquery-collapse' ), '1.0.0', true );
}

genesis();

style.css

/* FAQ
--------------------------------------------- */
 
.no-post-edit-link a.post-edit-link {
	display: none;
}
 
.open-close-btns {
	text-align: right;
	margin-bottom: 10px;
}
 
.open-close-btns button {
	background: transparent;
	padding: 0;
	color: #333;
	font-size: 12px;
}
 
span.pipe {
	font-size: 12px;
}
 
.faq {
	margin-bottom: 30px;
}
 
.faq .question {
	background-color: #d5d5d5;
	font-weight: normal;
	font-size: 18px;
	margin-bottom: 0;
	line-height: 1.3;
}
 
.faq .question a {
	color: #333;
	display: block;
}
 
.faq .question a:focus,
.open-close-btns button:focus {
	outline: none;
}
 
.faq .question a,
.faq .answer {
	padding: 20px;
}
 
.faq .answer {
	background-color: #f5f5f5;
}
 
.faq .question a:after {
	content: '\f107';
	font-family: FontAwesome;
	padding-left: 5px;
	text-shadow: 0px 2px 3px #fff;
}
 
.faq .question.open a:after {
	content: '\f106';
}