Did i understand you right, your main ISSUE is the → ONE-TAG-SELECTION ← at once?
Yes, selection-tags are made for the purpose to be able to make a → MULTIPLE-SELECTION<–, but of course you can change their behaviour by code. I have seen this problem a lot in the past. But shouldn’t the selection-tag element provide settings where you simply can turn it into a → SINGLE-TAG-SELECTOR ← but maybe i am also wrong.
But you can take a look here…
…or here… a very old post…
…or here…
Ok, i think enough information about the SELECTION-TAG-ISSUE.
Well on my opinion you are making things very complicated, i would use maybe a repeater for this and even having my menu drivven by DATABASE (CMS) what is a way more dynamic and easier to maintain.
Example? Take a look here…
In this example you will see a REPEATER, driven by a DATABASE in the background.
You can modify the repeater design and behavioureasily, for example changing the amount of rows and cols and the type of presentation.
Since i have only 5 items inside my example-CMS → you also see only 5 buttons.
Upscaling CMS to 10 items → would result into 10 buttons generating a secong row set of 5 buttons.
The post connected to this REPEATER you will find here…
UPGRADED code…
import wixData from "wix-data";
//-----------------[ USER-INTERFACE ]-----------------
const REPEATER = 'repeater1';
const SECTION = 'section1';
const BOX = 'box3';
const IMAGE = 'mainimage';
const BUTTON = 'button1';
const CMS = 'Backgrounds';
//-----------------[ USER-INTERFACE ]-----------------
$w.onReady(async()=> {console.log('Page ready...');
let repData = await get_CmsData(); console.log('Repeater-Data: ', repData);
$w(`#${REPEATER}`).data = repData;
$w(`#${REPEATER}`).onItemReady(($item, itemData, index)=> {console.log('Index: ', index);
console.log('Item-Data: ', itemData);
$item(`#${BUTTON}`).onMouseIn(()=> {console.log('Mouse-In');
$w(`#${IMAGE}`).src = itemData.image;
$w(`#${SECTION}`).background = itemData.image;
//$w(`#${BOX}`).style.backgroundColor = itemData.image;
});
$item(`#${BUTTON}`).onClick(()=> {console.log('Click');
reset_ButtonBGColors();
$item(`#${BUTTON}`).style.backgroundColor = 'blue';
$w(`#${SECTION}`).background = itemData.image;
//$w(`#${BOX}`).style.backgroundColor = itemData.image;
});
});
});
function get_CmsData() {
return wixData.query(CMS)
.find()
.then((results)=> {let items = results.items; console.log('Items: ', items);
if (items.length > 0) {console.log('Some DATA has been found!!!');
return items;
} else {console.log('DATA is empty!!!');}
})
.catch((err)=>{console.log(`ERROR: ${err}`);
console.log('Something went wrong!!!');
return [];
});
}
function reset_ButtonBGColors() {
$w(`#${BUTTON}`).style.backgroundColor = 'black';
}
To make the —> SELECTED-BUTTON-EFFECT (blue-button & only clicked one)