Question

I have this code :

HTML

<a href="javascript:void(0);" id="showDiv">Show Agency</a>

<div id="invisibleDiv">
    <script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
    <script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>

jQuery

$("#showDiv").click(function () {
    $("#invisibleDiv").show();
});

CSS

#invisibleDiv
{
    display:none;
}

When I load the page, I see the scripts loaded from external source, also if the div is hidden. The scripts call with some API and generate HTML/Javascript.

Well, what I’m looking for is to force the script to be unloaded if the parent is hidden; than, when I’ll show it (through the link), load the script inside the div.

How can I do it? I’ll avoid AJAX.

Answer 1

UPDATED:

• DEMO: http://jsfiddle.net/HqeD2/

<a href="#" id="showDiv">Show Agency</a>
<div id="invisibleDiv">
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>

$(function() {
    $("#showDiv").click(function() {
        $.getScript("http://platform.linkedin.com/in.js");
    });
});