A few months ago, I saw an accordion where the image changed when the accordion items were selected. When I looked at the underlying code, the images were absolutely positioned, but that just didn’t seem very easy. I asked in the ACSS Circle group about it, but apparently, nobody saw it because there are still zero responses. The same question was asked recently in the BricksExtras Facebook group, and David Browne provided a great answer with a tutorial video and JavaScript. This works really well if you are using the Pro Accordion from BricksExtras, but what about the Frames Accordion? Everything else still applies, but you have to modify the JavaScript. The key is listening for a change in the aria-expanded value. I prefer the two-column approach over the absolute positioning complexity.
document.addEventListener("DOMContentLoaded", () => {
const imageSelector = '.fw-img';
const accordionSelector = '.fw-accordion';
const image = document.querySelector(imageSelector);
if (!image) return; // Exit if image not found
const accordionHeaders = document.querySelectorAll(accordionSelector + ' .fr-accordion__header');
accordionHeaders.forEach(item => {
if (item.hasAttribute('data-image')) {
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'aria-expanded') {
const expanded = item.getAttribute('aria-expanded') === 'true';
if (expanded) {
image.srcset = '';
image.src = item.getAttribute('data-image');
}
}
}
});
observer.observe(item, { attributes: true });
}
});
});I used a query loop of the latest posts in the example below, but any query loop will do. You can also do it manually by changing the data attribute with a full URL to the image.
1 comment
Eduardo Böke
Huge thanks! I’ve been wrestling with this code for a week. Your solution works for Accordion bricks (nestable) and Frames Accordion.