加载页面时，隐藏和不加载所选div的内容。单击load div及其内容

Question

所以，我试着用谷歌搜索它，但似乎这不是我最擅长的部分。

例如:我有一个嵌入了视频的div，但要显示视频，我必须首先单击打开并显示视频的div。问题是它在页面加载时加载。当有超过4-5个带有视频的div时，它会使浏览器变得滞后。我如何才能让它不加载页面加载，而只在div被单击时才加载，并在再次单击时卸载其内容。

$('.cont').hide();


$('h4').click(function () {
    var $answer = $(this).next('.cont');
    if ($answer.is(':hidden')) {
        $answer.show();
    } else {
        $answer.hide();
    }
});

这就是我所拥有的，但并不是我所描述的那样

Answer 1

<div class="container">
<iframe new-src="http://linktoadditionalcode">Update your Browser!</iframe>
<a href="javascript:load(this)">Load</a>
<a href="javascript:unload(this)">Unload</a>
</div>
<script>
function load(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src=frame.new-src;
}
function unload(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src="";
}
</script>

这将加载/卸载iframe。虽然您的代码只是隐藏了它，但这会完全加载/卸载它。