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.
You can create as many accordion fields as needed, assign the field group to a post or page and populate the 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.
I have not clearity where to add JS code and CSs on my website
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).
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?
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!
Hi.
Where to put the JS? On my single.php?
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!
Thanks for the great tutorial
Is there an option to create an ACF acordion and use it with Elementor
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.