In this blog, I am going to explain to you, how to change multiple images when clicking on text or blurb module.

 

 

CSS Code:

.video-not-first { display: none; } .video-item-cursor { cursor: pointer; } @media all and (max-width: 980px) { .item-responsive-grid { display: grid; grid-template-columns: 50% 50%; grid-column-gap: 2vw; } } .video-walkthrough-active { background-color:#fff; margin-right:-0.5vw; margin-left:-0.5vw; box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important; } .video-walkthrough-active .et-pb-icon{ color: #b0c8ff !important; }

 

JQuery Code:

jQuery(function($){
 
$('[id*="video-walkthrough-item"]').click(function() {
    var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
   
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');
 
  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');
 
});
});