Tabs Widget in conjunction with jQuery Plugin Twenty Twenty

Hey guys.

WHAT I HAVE:
I have a site I’m working on where I have 2 tabs setup with the tab widget. Inside of the tab that IS NOT the default tab, I have an image slider plugin called Twenty Twenty that’s used for showcasing before and after pictures in a unique way.

THE ISSUE:
I have to double click the tab labeled “Exterior” in order for the images to show up. By default, the plugin is set up to load the plugin when the page loads, but it won’t show up since it’s hidden by the tab. To fix this, I switched the code below:

FROM:

$(window).load(function() {
$("#container1, #container2, #container3, #container4, #container5, #container6, #container7, 
#container8, #container9").twentytwenty();
});

TO:

$("#exterior").click(function() {
$("#container1, #container2, #container3, #container4, #container5, #container6, #container7, 
#container8, #container9").twentytwenty();
});

I did this hoping that the plugin would then trigger upon clicking the tab which I gave the ID of #exterior. It worked, but like I mentioned, now I have to double click the tab in order to make the images show up.

At this point, I’m not sure what to do. My client is being super particular and is insisting things are set up exactly this way, so any help I really appreciate!

SHARE LINK

GALLERY LINK