How to: Create an Accordion Using Advanced Custom Fields Pro Repeater Field and Bootstrap

11th October 2018

A bit niche, but may be a useful snippet of code for some. First I’ve setup a repeater field in ACF Pro, and called it ‘accordion’. The sub fields are ‘title’ and ‘content’. The title sub field is going to label the accordion button that controls the toggle, the content sub field is what drops out. Then in the page template within my theme, I’m adding this code:

Of course, this relies on you already having called the Bootstrap stylesheet and other dependencies, but I’m guessing you won’t be looking at this unless you’re already working with it.

As a freelance musician and teacher my website is very important for generating business and maintaining good contact with my clients. I have found Jo Cox Design very useful to help maintain elements of my site which are more complex. I like to have control of my site but I often find there are things I cannot achieve on my own. I would certainly recommend Jo as a friendly person who’s easy to work with and who can help you achieve such goals.

Trev Williams