Create An ACF Repeater Accordion in WordPress

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

8 Comments

  1. Alen on October 12, 2022 at 2:47 pm

    I have not clearity where to add JS code and CSs on my website

  2. MK Web on June 13, 2022 at 11:24 am

    Hi,

    I have done as instructed in the tutorial above but for some reason the code just keeps displaying the message for when there are no rows added (even though I have added some rows).

  3. Vasiliy on May 1, 2022 at 11:24 am

    I’m impressed your code really works.
    The accordion worked the first time.
    Thank you very much!

    I have a question, how can I make the first accordion active by default?

  4. Bruce Smith on June 3, 2021 at 11:03 pm

    I second the question Kara had. What would you add to make the other accordions automatically close when a new one is open. This is exactly what I was looking for . Thanks for sharing!

  5. Victor on February 18, 2021 at 3:43 am

    Hi.

    Where to put the JS? On my single.php?

  6. Kara Shapiro on January 25, 2021 at 6:03 am

    This is awesome! Thank you for the detailed layout here. It’s been super helpful. I have one question about having the any open accordions close once another one is opened? Is that possible with this code? Thank you!

  7. 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

  8. 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 all Comment