How to change an image according to active Accordion Item?

Hey, I’m currently working on a webflow project where there should be a “How-To” section.

The section should be structured as follows:

The image should always changing according to the active accordion item.

Would anyone have any ideas on how to do this?

Glad to get any help! Thanks! :hearts:

Hey @juicydisorder! Some custom code can help you achieve this, can you share a link?

Hey @Support-Luis, would be great to get your help there. I will send you the link in private.

1 Like

DM’s are open!

Thanks to @Support-Luis , I got it working. Here is the script in case someone needs it some day too:

window.onload = function () {
const accordionItems = document.querySelectorAll('.fs_accordion-2_item');

    function handleAccordionActivation(accordionItem) {
      const isActive = accordionItem.classList.contains('is-active-accordion');

      // Get the image source element
      const imageSource = accordionItem.querySelector('.howto-image-source');

      // Get the target image element
      const imageTarget = document.querySelector('#howto-image-target');

      if (isActive) {
        imageTarget.src = imageSource.src;
      } else {
        imageTarget.src = '';

    // Attach event listener to handle accordion activation on click for each accordion item
    accordionItems.forEach((accordionItem) => {
      accordionItem.addEventListener('click', function () {

The target image, which is exchanged by clicking on an accordion item, has the ID “howto-image-target” and the respective source image is in the accordion item, with the assigned class “howto-image-source”.

1 Like