Ask your WordPress questions! Pay money and get answers fast! (more info)

Need an accordion for an ACF repeater field

  • SOLVED

I have an ACF 5 Pro repeater field, and need to integrate an accordion. It's a simple FAQ.

Here's the working repeater field:


<?php while( have_rows('faq_question') ): the_row();

// vars
$question = get_sub_field('question');
$answer = get_sub_field('answer');

?>

<div class="faq-container">
<h2 class="faq-question"><?php echo $question; ?></h3>
<?php echo $answer; ?>
</div>

<?php endwhile; ?>


Looking for an accordion similar to something like this:

[[LINK href="http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/"]]Accordion Example[[/LINK]]

I want a smooth jquery one, but I don't know how to enqueue scripts and all of that crap to make this work.

Answers (2)

2015-06-30

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!

2015-06-30

S├ębastien | French WordpressDesigner answers:

generate your html structure with this code


<?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-1"><?php echo $question; ?></a>

<div id="accordion-1" class="accordion-section-content">
<?php echo $answer; ?>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div><!--end .accordion-->

<?php endwhile; ?>


and use the js and the css like in the tutorial


Kyler Boudreau comments:

Thanks Sebastien, but that's the thing - I tried implementing the js and it didn't work for me because it probably conflicted (because I don't know how to enqueue it). The template/HTML formatting is no problem. It's getting the JS to work that I'm having troubles with.


S├ębastien | French WordpressDesigner comments:

if there is a conflict I need the URL of your site