Create An ACF Repeater Bootstrap Accordion in WordPress

October 6, 2019| 1 comment

Create An ACF Repeater Bootstrap Accordion for use in WordPress.

Accordions can be a handy way of managing larger amounts of data to display only certain bits at a time this guide shows how to use a Boostrap accordion with ACF, a non-bootstrap guide is here.

Create the ACF Repeater fields for the Bootstrap accordion.

Accordion Acf Repeater

You can create as many accordion fields as needed, assign the field group to a post or page and populate the repeater rows.

Accordion Acf Repeater Rows

Add the ACF Repeater Loop Bootstrap Accordion Code

	<?php


	// *Repeater
	// bootstrap_accordion_repeater
	// *Sub-Fields
	// accordion_header
	// accordion_content

	// check if the repeater field has rows of data
	if( have_rows('accordion_repeater') ):
	$i = 1; // Set the increment variable

	echo '<div id="accordion">';

	// loop through the rows of data for the tab header
	while ( have_rows('accordion_repeater') ) : the_row();

	$header = get_sub_field('accordion_header');
	$content = get_sub_field('accordion_content');

	?>

	<div class="card">
	<div class="card-header" id="heading-<?php echo $i;?>">
	<h5 class="mb-0">
	<button class="btn btn-link" data-toggle="collapse" data-target="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapse-<?php echo $i;?>">
	<?php echo $header; ?>
	</button>
	</h5>
	</div>

	<div id="collapse-<?php echo $i;?>" class="collapse" aria-labelledby="heading-<?php echo $i;?>" data-parent="#accordion">
	<div class="card-body">
	<?php echo $content; ?>
	</div>
	</div>
	</div>


	<?php $i++; // Increment the increment variable

	endwhile; //End the loop

	echo '</div>';

	else :

	// no rows found
	echo 'Come back tomorrow';

	endif;

view raw accordion-repeater.php hosted with ❤ by GitHub

Fred Perry

The brand founded by triple Wimbledon champion Fred Perry in 1952 and adopted by generations of British subcultures ever since. T

S,M,L,XL,XXL,XXXL

Red, Green, Blue

Shortcode Version

You can also do it as a shortcode and insert the loop.

	<?php //<~ don't add me in - add the code below in functions.php


	add_shortcode( 'wpb_bs_accordion_acf', 'wpb_bs_accordion_acf' );
	/**
	* Bootstrap Accordion Repeater Field
	*/
	function wpb_bs_accordion_acf() {
	ob_start();

	// *Repeater
	// bootstrap_accordion_repeater
	// *Sub-Fields
	// accordion_header
	// accordion_content

	?>


	<?php

	// check if the repeater field has rows of data
	if( have_rows('accordion_repeater') ):
	$i = 1; // Set the increment variable

	echo '<div id="accordion">';

	// loop through the rows of data for the tab header
	while ( have_rows('accordion_repeater') ) : the_row();

	$header = get_sub_field('accordion_header');
	$content = get_sub_field('accordion_content');

	?>

	<div class="card">
	<div class="card-header" id="heading-<?php echo $i;?>">
	<h5 class="mb-0">
	<button class="btn btn-link" data-toggle="collapse" data-target="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapse-<?php echo $i;?>">
	<?php echo $header; ?>
	</button>
	</h5>
	</div>

	<div id="collapse-<?php echo $i;?>" class="collapse" aria-labelledby="heading-<?php echo $i;?>" data-parent="#accordion">
	<div class="card-body">
	<?php echo $content; ?>
	</div>
	</div>
	</div>


	<?php $i++; // Increment the increment variable

	endwhile; //End the loop

	echo '</div>';

	else :

	// no rows found
	echo 'Come back tomorrow';

	endif;

	return ob_get_clean();
	}