Need an accordion for an ACF repeater field WordPress

Andrea P answers:

follow this tutorial:
http://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery

the problem is that wordpress runs jquery in no-conflict mode, so you have to substitute the symbol $ with jQuery everywhere within the jquery code of that tutorial.

by instance:

function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}


becomes


function close_accordion_section() {
jQuery('.accordion .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}


then you place the css into a file in your template with this path:
/css/faq-accordion-css.css

and the corrected jquery code in a file here:
/js/faq-accordion-scripts.js

and then you add this code to your functions.php

// ADD SCRIPTS and their styles
function add_faq_accordion_scripts(){
// load accordion css
wp_register_style('faq-accordion-style', get_template_directory_uri().'/css/faq-accordion-css.css', false, NULL, false);
wp_enqueue_style('faq-accordion-style');
// script for accordion (in footer)
wp_register_script('faq-accordion-scripts', get_template_directory_uri().'/js/faq-accordion-scripts.js', array( 'jquery' ), NULL, true );
wp_enqueue_script('faq-accordion-scripts');


}
add_action( 'wp_enqueue_scripts','add_faq_accordion_scripts');


after that, you can build up the loop in this way:


<?php // set a counter for the ids
$question_count = "1";
?>
<?php while( have_rows('faq_question') ): the_row();

// vars
$question = get_sub_field('question');
$answer = get_sub_field('answer');
?>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-<?php echo $question_count; ?>"><?php echo $question; ?></a>

<div id="accordion-<?php echo $question_count; ?>" class="accordion-section-content">
<p><?php echo $answer; ?></p>

</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div><!--end .accordion-->

<?php // increment counter
$question_count++;
?>

<?php endwhile; ?>


Kyler Boudreau comments:

HOLY CRAP. Andrea, what an amazing, detailed response. It worked first try. Thank you. Voting now!