Making a accordion item change an image with each item click

Ask the community
, ,
1

Question:
Making a accordion item change an image with each accordion item click

Product:
I’m using wix studio with velo

What are you trying to achieve:
I have a container divided in two cells, the right cell contains the accordion and the left side one contains the images to each accordion item. Im trying make so that on every accordion item clicked the correspondent image is shown.

What have you already tried:
I assign a #id to each image to match the accordion item and made this velo code.

Unfortunately this dosent seem to work at all. Dont forget that the image its outside of the accordion container, and doesn’t have nothing to do with the accordion item itself. I want them to be two separated items.

$w.onReady(function () {
    // Hide all images initially
    hideAllImages();

    // Set up event handlers for each accordion item
    $w('#accordionItem1').onClick(() => showImage('#accordionimage1'));
    $w('#accordionItem2').onClick(() => showImage('#accordionimage2'));
    $w('#accordionItem3').onClick(() => showImage('#accordionimage3'));
    $w('#accordionItem4').onClick(() => showImage('#accordionimage4'));
    $w('#accordionItem5').onClick(() => showImage('#accordionimage5'));
    $w('#accordionItem6').onClick(() => showImage('#accordionimage6'));
});

function hideAllImages() {
    $w('#accordionimage1').hide();
    $w('#accordionimage2').hide();
    $w('#accordionimage3').hide();
    $w('#accordionimage4').hide();
    $w('#accordionimage5').hide();
    $w('#accordionimage6').hide();
}

function showImage(imageId) {
    // Hide all images first
    hideAllImages();
    // Show the selected image
    $w(imageId).show();
}

accordion
accordion1523×577 142 KB

2

For an accordion element, you cannot use an onClick event listener (https://dev.wix.com/docs/velo/api-reference/$w/accordion/introduction).
You only have access to onMouseIn - images will change when you hover the cursor.

1 Like