If you want to create a dynamic product showcase where your visitor can change the product image and discover all the varieties with a small click this is the right place to learn.

Initial Image Show/Hide CSS

.all-images{
display: none;
}
#red-image{
display: block;
}

Button Data Attribute

data-showme|IMAGE-ID-NAME

Dynamic Image Hide/Show JS

<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>