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

View the code on Gist.

#accordion button:after {
content: “2796”; /* Unicode character for “plus” sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;

#accordion button.collapsed:after {
content: “2795”; /* Unicode character for “minus” sign (-) */

Fred Perry

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


Red, Green, Blue


Shortcode Version

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

View the code on Gist.


Some more options here.


Leave a Reply