Create Dynamic Accordion in Oxygen Builder with ACF

In this tutorial, I'll show you how to make an accordion with Oxygen Builder 4.x using ACF PRO, giving you complete control over its appearance.

You'll need the following:

• ACF PRO
• Oxygen Builder 4.x

This tutorial covers:

• Creating the accordion field group in ACF Pro
• Adding the field group to a post or page in WordPress
• Building the dynamic accordion element in Oxygen Builder
• Customising the appearance of the accordion with Oxygen built-in styles

Creating the Accordion Field Group in ACF PRO

The first thing you need to do is create a new field group in ACF Pro. I'll call mine "Accordion".

Add a Repeater field to your field group, and give it a label. I called mine "Accordions".

Add the following sub-fields to your Repeater field:

• Title (text)
• Content (WYSIWYG)

Add the Field Group to a Post or Page in WordPress, and your field group should look like this:

Populate Content inside the ACF Accordion Fields

I entered the following values for my fields inside my page with ACF Accordion fields:

Building the Dynamic Accordion Element in Oxygen Builder

Now that you have your content set up, you can start building the accordion element in Oxygen Builder.

1. Add a new Repeater Field inside Oxygen Builder
2. Add class "accordions"
3. Use "ACF Repeater" and "Accordions".
4. Apply Query Params

1. Select child element "div" of the accordion
2. Add class "accordion-element"
3. Add a new div inside of it
4. Add class "accordion-button"
5. Add width: 100%

1. Add Text field inside accordion button
2. Add dynamic data with the "Insert Data" field
3. Choose Repeater Field
4. Select "title"

And it should look like this:

1. Add a new text field inside accordions repeater child element "div"
2. Insert Dynamic Data from ACF which we called content
3. Add class "accordion-content"

1. Add a new Code Block inside the section, NOT Repeater.
2. Remove PHP
3. Add the following JavaScript to it

const accorTitle = document.querySelectorAll(".accordion-button");
const accorContent = document.querySelectorAll(".accordion-content");

let titleNo = 0;
let contentNo = 0;

accorTitle.forEach((btn) => {
  btn.dataset.id = titleNo;
  titleNo++;
  btn.addEventListener("click", function () {
    accorTitle.forEach((btn) => {
      btn.classList.remove("active");
      btn.classList.add("non-active");
    });
    this.classList.remove("non-active");
    this.classList.add("active");
    accorContent.forEach((content) => {
      content.classList.add("hidden");
      if (btn.dataset.id === content.dataset.id) {
          content.classList.remove("hidden");
      }
    });
  });
});

accorContent.forEach((content) => {
  content.dataset.id = contentNo;
  contentNo++;
  content.classList.add("hidden");
});

//We can set which tab content we want to show first, 0 = 1st, 1 = 2nd and so on...
accorTitle[0].classList.remove("non-active");
accorTitle[0].classList.add("active");
accorContent[0].classList.remove("hidden");

Add CSS inside the code block

.hidden {
	display: none;
}

We should have a working accordion on the front end:

Customising the Appearance of the Accordion with Oxygen

You can now customise the appearance of your accordion using Oxygen, I applied the following styles to my accordion:

Class .accordions

• Layout>Layout Child Elements: Vertical
• Layout>Gap: 10px

Class .accordion-button

• Advanced>Size&Spacing>Padding: 15px 20px 15px 20px
• Advanced>Border>Border Radius: 0

Class .accordion-content

• Advanced>Size&Spacing>Padding: 15px 20px 15px 20px
• Advanced>Border: #e9e9ed solid 1px

Now inside the Oxygen Builder, the tabs will look like this:

Add open and close Icon

Let's add an icon on the right-hand side of the button

1. Select element with the .accordion-button
2. Change Layout Child Element to Horizontal
3. Vertical Item Alignment: Middle
4. Horizontal Item Alignment: Space Between

1. Add Icon inside of the accordion button
2. Give it a class "accordion-icon"
3. Icon Size: 20px
4. Icon: caret-down

1. Head back to Code Block
2. Add another line of CSS

.accordions .active .accordion-icon {
	transform: rotate(180deg);
}

This will have the arrow pointing up to close it when the accordion is active.

More Tips

If you want to have all tabs closed from the start you can remove the bottom code from JavaScript:

//We can set which tab content we want to show first, 0 = 1st, 1 = 2nd and so on...
accorTitle[0].classList.remove("non-active");
accorTitle[0].classList.add("active");
accorContent[0].classList.remove("hidden");

This will have all tabs closed from the start.

Final Result

Here's what my final accordion looks like on the front end:

Recommended to add

.accordion-button {
    cursor: pointer;
}

I hope you found this tutorial helpful. If you have any questions, feel free to leave a comment below.