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


S,M,L,XL,XXL,XXXL


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.

Share:

Leave a Reply