javascript - Thinglink image not visible until browser resize -


i trying repurpose pre-existing theme, includes drop down menu displays image. trying embed thinglink drop down menu's content section, not visible until resize browser window.

here menu looks like: asdf

then when clicked, can see empty space image should show: asdf

then when browser resized, image appears: asdf

this code content of menu:

<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>       <!-- thinglink image 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 set ajax_accordion_content display block, image displays correctly. however, want hidden until click on menu. how can image load when menu opened without having resize browser?

look want jquery click function. dnt know menu section add button example .. here live fiddle link
https://jsfiddle.net/ve04q9sm/1/

$(function() {    $("#display-img").click(function() {     $(".ajax_accordion_content").toggle('slow')     $(this).find('i').toggleclass('glyphicon-menu-right glyphicon-menu-down');     })    })
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    <button id="display-img" class="btn btn-primary"><span><i class="glyphicon glyphicon-menu-right"></i></span>kid did not rounded</button>   <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>  <!-- thinglink image 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>


Comments

Popular posts from this blog

firebird - Error "invalid transaction handle (expecting explicit transaction start)" executing script from Delphi -

mongodb - How to keep track of users making Stripe Payments -