How to change an image according to active Accordion Item?

Attributes
1

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

The section should be structured as follows:
<div><fs_accordion></fs_accordion></div><div><img></img></div>

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:

2

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

3

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

1 Like
4

DM’s are open!

5

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

<script>
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 () {
        handleAccordionActivation(accordionItem);
      });
    });
  };
</script>

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