I am trying to open an iframe on click and hide the image. Any help as to why this does not work would be great! Thanks

```html
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>test</title>
</head>

<body>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#button').click(function () {
                if (!$('#iframe').length) {
                    $('#iframeHolder').html('<iframe id="iframe" src="http://www.test.com" width="100%" height="700"></iframe>');
                    document.getElementById('loadingimage').style.visibility = 'hidden';
                }
            });
        });
    </script>

    <div id="button"><img id "loadingimage"class="alignnone size-full wp-image-2077" src="https://www.test.jpg"
            alt="test image" width="860" height="474" /></div>
    <div id="iframeHolder"></div>

</body>

```