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>