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');
});
})
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:
Initiates the coordinates to be reset when mouse hovers over the tabs: