I am following the site shown below to create tabs on my Divi Site (on my localhost at the moment) but I was looking for some help in regards to changing the behaviour of the code.

https://www.elegantthemes.com/blog/divi-resources/how-to-create-custom-testimonial-tabs-with-divi-free-download

I have managed to follow the tutorial and this works exactly as shown on the site but I would like to change the behaviour from hover to clicking the blurbs (names) but not sure what part of the jquery I need to change.

The following is the jquery code:

jQuery(function($){
$(document).ready(function(){
 
$('#testimonial-person-1').addClass('testimonial-active');
 
$('[id*="testimonial-person"]').hover(function() {
 
var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);
 
$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');
 
$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');
 
});
 
});
});

The CSS Code:

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}
 
.testimonial-active {
transform: translateX(-10%);
}
 
[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
 
cursor: context-menu;
}
 
[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
 
position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;
 
visibility: hidden;
opacity: 0;
}

I would appreciate it, if somebody could guide me in how I can make this change on my site.

Thanks in advance.