Update image when corresponding text is clicked

I'd like to have an image block that changes what image is shown based on which item in list has been clicked. In other words, when you click on the second item in a list, the image on the left changes to show a different image that is associated with that list item. See below for a screenshot of what I am trying to achieve. Ability to rotate through list items and corresponding photos would be nice but is not essential. 

My website is using Brine template. 

Thanks for any suggestions or tips!

Hi @_kate,

I've used the code from Image on Hover Collection (aff) for this with great results. There are versions for both Squarespace 7.0 and 7.1

You can search Google with some keywords, eg: jquery change image on text click, change image on click...

eg this code: https://codepen.io/mnosova/pen/oddBxR

To do this is a bit difficult and time-consuming, it's outside the free support range, so I just gave the above suggestion. You can search, test the code, and can ask more questions, if I know I will answer.

This thread helped me do something similar to what you are wanting...to get the text on the side and formatted like that would require more CSS I imagine

On 3/9/2020 at 10:33 PM, _kate said:

I'd like to have an image block that changes what image is shown based on which item in list has been clicked. In other words, when you click on the second item in a list, the image on the left changes to show a different image that is associated with that list item. See below for a screenshot of what I am trying to achieve. Ability to rotate through list items and corresponding photos would be nice but is not essential. 

My website is using Brine template. 

Thanks for any suggestions or tips!