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:

accordion group field in ACF with repeater field, and title and content field assigned to a page accordion

Populate Content inside the ACF Accordion Fields

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

accordion populated fields with ACF inside my created page

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
adding repeater field inside Oxygen Builder with ACF accordion 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%
adding accordion button inside oxygen builder
  1. Add Text field inside accordion button
  2. Add dynamic data with the "Insert Data" field
  3. Choose Repeater Field
  4. Select "title"
Adding dynamic field from ACF repeater field to Oxygen Builder repeater for the button of the accordion

And it should look like this:

How it looks with the buttons oxygen Builder
  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:

dynamic accordion inside the Oxygen Builder
It looks better on the front end and properly working.

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
adding icon for the accordion
  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.