I’m trying to create the following, but I am not sure it’s possible…
I want to have 7 buttons/images with predefined images in them and somewhere else on the page a larger image ‘box’ that is currently showing an ‘empty’ graphic. I need the user to be able to select any one of these seven buttons/images and it needs to have a selected state. If another is clicked when one is already selected, the selected one must revert back to an unselected state at the same time that the newly selected one changes to a selected state.
Whichever one is selected, I need this other ‘emtpy’ image element on the page so show a larger version of the selected ‘button’/’image’.
Am I trying to do something that elements can’t do?
No, Elements doesn’t provide a built‑in component to toggle a ‘selected’ state across multiple images and update another element automatically.
You’d have to write a bit of JavaScript or use Alpine to handle the click events, manage the selected state, and swap out the larger image.
If you’re comfortable with code, you could wrap that logic into a custom component. Otherwise, there’s no plug‑and‑play option for what you’re describing.
That’s very disappointing to hear. Thanks for replying.
I am only at the copying someone else’s code part of the journey; I don’t know how to write my own let alone make a component for reuse, but this kind of component seems like it should be part of the default library.
I’m working on a component that might do what you need. It is almost done, just a few more tweaks to the code to get it right. It does a lot more than what you need, but it can be configured to do exactly what you want.
Hello I published an accordion which I think is similar to what you need a few weeks ago, with the help of a few people here I did an Image/Video/PDF version here’s the image one. See if this is what you want and if you need help then let me know. elementsapp://downloadDocument/lewFU85489tS