Show / Hide Chatbox, Hides All Content, But Shows All As Well.

Hey everyone i got a prem shoutmix chatbox. that I would love to show and hide with a click of the button. my site is https://www.thescenereleases.net/

Here’s what the chatbox looks like
https://i61.tinypic.com/2d8pbm1.jpg

Here’s the hide/show code i’m using along with the chatbox coding as well.

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

<a href="#" onclick="toggle_visibility('list1');">
       <p>Chatbox</p>
       </a>
       <div id="list1" style="display:none;">
         <ul>
<?php  function shoutmixnightimescene($user_identity = '') {
	return htmlspecialchars(
		'&name='.rawurlencode($user_identity)
		.'&code='.md5($user_identity.'7f7ebe7421'));
}
?>

<?php if ( $user_ID ) : ?>
<iframe title="yourshoutmixid" src="https://www.shoutmix.com/?nighttimescene<?=shoutmixnightimescene($user_identity);?>" width="170" height="555" frameborder="0" scrolling="auto"> allowtransparency="true"
<a href="https://www.shoutmix.com/?nighttimescene<?=shoutmixnightimescene($user_identity);?>">View shoutbox</a>
</iframe>
<?php endif;  ?>

Now, as you can tell in the image that the chatbox is fine.. But, once i add the code that is in front of you to my index.html file. My whole website is black, but but….. i get my botton to show chatbox, and it actually will show the rest of my site. I don’t want that. any reasonn why this is happening?

Thanks