Image Maps + Responsive Tabs with rwdImageMaps

Question

I'm am looking for a way to add rwdImageMaps functionality to a pre-built tab module in a Wordpress Theme called Divi.

I have found a way to make image maps + responsive "accordion" work well for the Divi theme with rwdImageMaps by using this code below: (Example of Divi Theme Accordian Module)

jQuery('.et_pb_toggle').click(function(){
    jQuery('img[usemap]').rwdImageMaps();
});

However, I'm having a hard time finding a trigger that make the pre-built "tabs" module work in a similar way. (Example of Divi Theme Tabs Module)

Would there be a way to make a click of a list item initiate rwdImageMaps in a separate div?

Idea I've been trying is if you click .et_pb_tabs_controls li, then make the corresponding .et-pb-active-slide active to trigger the image map coordinates...

Here is an example of the structure:

<div class="et_pb_tabs">
<ul class="et_pb_tabs_controls clearfix">
    <li class="et_pb_tab_active"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
</ul>
<div class="et_pb_all_tabs">
    <div class="et_pb_tab clearfix et_pb_active_content et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">content</div>
    <div class="et_pb_tab clearfix" style="z-index: 2; display: none; opacity: 0;">content</div>
    <div class="et_pb_tab clearfix" style="z-index: 1; display: none; opacity: 0;">content</div>
    <div class="et_pb_tab clearfix" style="z-index: 1; display: none; opacity: 0;">content</div>
</div>

As this is a pre-built module, my hope is to be able to add additional JavaScript to help trigger the ability to set the coordinates for an image map inside the hidden tabs.

Update: I have added this code below but it requires you to click the image map twice in order for the coordinates to be setup. Not ideal but not finding a way to trigger it with 1 click:

$(function(){
$(".et_pb_row").click(function ( ) {
      $(window).trigger('resize'); 
 });
})

Answer 1

Okay, I'm not sure this is proper code but so far works for me on both desktop and mobile as well as when the page is resized:

Calls rwdImageMaps for image maps to work on resize:

 $(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

Initiates the coordinates to be reset when mouse hovers over the tabs:

$(function(){
$(".et_pb_tabs_controls").hover(function ( ) {
      $(window).trigger('resize'); 
 });
})