The Accordion Element
Currently, The Breakdance accordion element doesn’t allow dynamic fields. This can change in the future, but at the moment, that’s not the case. Also, for the sake of completion, Destiny elements has an accordion element that allows the usage of ACF repeater fields, so that’s great.
That means, if you already have a membership, you won’t need this tutorial, BUT if you’re looking for just this one feature, or if you want to learn to do it yourself, this tutorial will show you how.
One more thing, this is not a custom element that was built in the Breakdance element studio, this is just an on-page, straightforward way of doing it.
Quick Note:
My usual approach to solving problems comes from an agency perspective. When you’re working with multiple clients, multiple timelines, delivering on deadline is super important, so writing or implementing reliable code that steps outside of what the builder does is a necessary skill because you really don’t have time to wait around for the plugin/theme developers to add your specific feature.
Update
Breakdance v2.3 has added the function to allow accordions in their repeater fields. So… this tutorial is now… obsolete haha
The Video
Timestamps
- 0:04 Introduction
- 1:15 Proof of concept
- 2:10 Setting up ACf fields
- 4:10 Setting up a global block
- 9:20 Making the FAQ page
- 15:05 Extra styling tips
The code
<script>
document.addEventListener('DOMContentLoaded', function () {
const accordions = document.querySelectorAll('.ai-accordion');
accordions.forEach(function (accordion) {
const items = accordion.querySelectorAll('.bde-dynamic-repeater-item');
items.forEach(function (item) {
const toggleTitle = item.querySelector('.ai-toggle_title');
const toggleContent = item.querySelector('.ai-toggle_content');
const toggleChevron = item.querySelector('.ai-toggle_chevron');
toggleContent.style.maxHeight = '0';
toggleContent.style.overflow = 'hidden';
toggleTitle.addEventListener('click', function () {
const isOpen = toggleContent.style.maxHeight !== '0px';
items.forEach(function (otherItem) {
const otherContent = otherItem.querySelector('.ai-toggle_content');
const otherChevron = otherItem.querySelector('.ai-toggle_chevron');
const otherTitle = otherItem.querySelector('.ai-toggle_title');
if (otherContent !== toggleContent) {
otherContent.style.maxHeight = '0';
if (otherChevron) {
otherChevron.style.transform = 'rotate(0deg)';
}
if (otherTitle) {
otherTitle.classList.remove('toggle-open');
}
}
});
if (isOpen) {
toggleContent.style.maxHeight = '0';
if (toggleChevron) {
toggleChevron.style.transform = 'rotate(0deg)';
}
toggleTitle.classList.remove('toggle-open');
} else {
toggleContent.style.maxHeight = toggleContent.scrollHeight + 'px';
if (toggleChevron) {
toggleChevron.style.transform = 'rotate(180deg)';
}
toggleTitle.classList.add('toggle-open');
}
});
});
});
});
</script>
<style>
.ai-toggle_title {
cursor: pointer;
}
.ai-toggle_chevron,
.ai-toggle_content {
transition: .5s all ease;
}
</style>
Post credit scene
This image was seriously considered to be used as the thumbnail, which ultimately, I decided against. BUT I think you should still be able to enjoy it.
Edit:
This is some additional tips on getting the repeaters to work on product categories. (Dim in the comments and I had a chat on FB about this)
The code screenshots
Hope this helps anyone who needs to add repeaters to a product category.
Dim says:
Can this work for product categories with different FAQs for each one?