Unable to add attribute to a button

[rana_benmahmoudParticipant]

Hello,

I would like to perform the same functionality in this video on changing the car colors upon button click. https://www.youtube.com/watch?v=nys-bvFn2Kg

I am unable to find where I can add the attribute of the buttons so each button is linked with the photo

[Support teamKeymaster]

Hi.

Where do you want to implement this functionality?

Do you want to make a separate block?

[rana_benmahmoudParticipant]

The first part of the code is done. 

I added 3 car photos, and hid 2 of  them using the code in the vide (display hidden)

The code is in a sperate page for testing purposes. All photos are in 1 block.

I added the html code using the element (Raw HTML)

<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>

<script>

var $ = jQuery

$(document).ready(function(){

$(‘[data-showme]’).on(‘click’, function(){

var showme = $(this).attr(‘data-showme’)

 

$(‘.all-images’).hide()

$(‘#’ + showme).show()

})

})

</script>

I couldn’t figure how to connect each button to the image using the attribute. I tried pasting in (on click code)

but this did not work..

[Support teamKeymaster]

Please, give me the site url and admin access.

And the page url with this block.

[rana_benmahmoudParticipant]

here you go

Private Content Hidden

[rana_benmahmoudParticipant]

Have you been able to help on this?

[Support teamKeymaster]

Yes. I will write within an hour.

[Support teamKeymaster]

I added and activated a quattro-child theme.

Added a script.js file and write js code here https://take.ms/W4sXj

Also you can use style.css for your styles.

How it works:

1. Buttons. https://take.ms/kxFAY
btn-showme-color – need for all such buttons
color-id-orange-car – color-id- class prefix, orange-car image ID

2. Images. https://take.ms/t5CNE
orange-car – image ID, it’s unique and can be only one on the page. If you need several cars of the same color in different blocks, use IDs orange-car-1, orange-car-2…
all-images first – all-images – the class is required for all images. first – this image will be displayed when the page loads.