I was recently reworking a site where I needed to swap out the Bricks Nested Accordion with the Frames Accordion — more of a preference than a requirement. The person who did this before used a JavaScript snippet to open and close all accordion panels. The structure of the Frames accordion is a bit different, so I turned to ChatGPT to modify the code and provide a way to use it multiple times on a single page.
After 10 seconds of thinking, the solution emerged.
Adding the accordion
Adding the accordion is straightforward. Other than noting the ID or assigning an ID, this step requires nothing else.
Adding the button
Insert the button where you want and give it a class of toggle all. Then, in the attributes, a data attribute with a name of data-accordion and a value of the ID of the target accordion needs to be present.
The Code
Here is the JavaScript. I tried adding it to WPCodebox and using the code element, but kept getting an error, so I added it to the Bricks custom code footer section.
<script>
document.addEventListener('DOMContentLoaded', () => {
/* ———————————————————————————————
INITIALISE EVERY BUTTON FOUND
——————————————————————————————— */
document.querySelectorAll('[data-accordion]').forEach(btn => {
const selector = btn.dataset.accordion;
const container = document.querySelector(selector);
if (!container) return; // nothing to control
const items = container.querySelectorAll('.fr-accordion__item');
/* Helpers scoped to this accordion */
const isOpen = item =>
item.querySelector('.fr-accordion__header')
?.getAttribute('aria-expanded') === 'true';
const setItemState = (item, expand) => {
const header = item.querySelector('.fr-accordion__header');
const body = item.querySelector('.fr-accordion__body');
const icon = header.querySelector('.fr-accordion__icon');
header.setAttribute('aria-expanded', expand);
item.classList.toggle('brx-open', expand);
header.classList.toggle('brx-open', expand);
icon?.classList.toggle('fr-accordion__icon--flipped', expand);
body.style.height = expand ? `${body.scrollHeight}px` : '0';
};
const refreshLabel = () => {
btn.textContent = [...items].every(isOpen) ? 'Hide All' : 'Show All';
};
/* ------------------------------------------------------------------- */
/* Initial label */
refreshLabel();
/* Button click → open/close everything */
btn.addEventListener('click', () => {
const expandAll = [...items].some(item => !isOpen(item)); // true → show all
items.forEach(item => setItemState(item, expandAll));
refreshLabel();
});
/* User toggles a single header → update label accordingly
(delegate the listener to the container) */
container.addEventListener('click', e => {
if (e.target.closest('.fr-accordion__header')) {
/* Allow Bricks to finish its own toggle first */
requestAnimationFrame(refreshLabel);
}
});
});
});
</script>Demo
Below is a demo using an FAQ custom post type.
Frequently Asked Questions
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Question 1
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.
Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can’t tell you how many times clients have asked me why their website is in another language!
There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.
If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.
Question 2
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.
Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can’t tell you how many times clients have asked me why their website is in another language!
There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.
If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.
Question 3
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.
Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can’t tell you how many times clients have asked me why their website is in another language!
There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.
If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.
Question 4
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.
Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can’t tell you how many times clients have asked me why their website is in another language!
There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.
If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.
