Create An ACF Repeater 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.

Create the ACF Repeater fields for the 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 Javascript

Add the ACF Loop Accordion Code

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

 

Some additional CSS styling is needed, which is included in the code. The ACF Repeater code is pretty simple with just 2 fields used for the accordion label and accordion content.

 

Shortcode Version

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

 

 

Ref

2 Comments

  1. Yoni on January 19, 2020 at 12:36 pm

    Thanks for the great tutorial
    Is there an option to create an ACF acordion and use it with Elementor

  2. Damiaan van Vliet on December 5, 2019 at 12:50 pm

    Fantastic! A clear manual for exact the purpose what I needed, building a accordion in WP with ACF.
    I have fixed fields so I have to change code a bit.
    But anyway, thanks a lot.

Leave a Comment