I am currently repurposing a pre-existing theme that has a drop-down menu showcasing an image. I am attempting to integrate a Thinglink into the content section of this drop-down, but unfortunately, the image does not appear until I adjust the size of the browser window.
Here is a glimpse of how the menu appears:
Upon clicking, only an empty space where the image should be visible is seen:
However, when the browser is resized, the image magically appears:
This snippet reflects the code for the menu's content:
<div class="ajax_accordion_content" style="display: none;">
<div class="report-detail">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="table_basic">
<tbody>
<!-- The ThingLink image intended to be embedded -->
<img style="max-width: 100%;" src="http://cdn.thinglink.me/api/image/832705713204625409/1024/10/scaletowidth#tl-832705713204625409;1043138249'" class="alwaysThinglink"/>
<script async charset="utf-8" src="http://cdn.thinglink.me/jse/embed.js"></script>
</tbody>
</table>
</div>
</div>
If I modify the display property of ajax_accordion_content to block, the image pops up correctly. However, my preference is to keep it hidden until the menu is clicked on. Any ideas on how to resolve this issue and have the image load seamlessly when the dropdown menu opens without requiring resizing of the browser?