Membuat Tombol Show Hide Pada Chat Box

<!-- left hidden chatbox START -->
<style>
#hcl {position:fixed;top:100px;left:0px;z-index:+1000;}
* html
#hcl {position:relative;}
.hcltab {height:125px;width:40px;float:left;cursor:pointer;background:url('http://i930.photobucket.com/albums/ad144/w4w4y/Logo%20button/dc4ccf10847ef73d0044722f724a56820cf34fea-1.png') no-repeat;}
.hclcontent {float:left;border:2px solid #790909;background:#ffffff;padding:10px;}.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style><script type="text/javascript">function showHidehcl(){var hcl = document.getElementById("hcl");var w = hcl.offsetWidth;hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);hcl.opened = !hcl.opened;}function movehcl(x0, xf){var hcl = document.getElementById("hcl");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;hcl.style.left = x.toString() + "px";if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}}</script><div id="hcl"><div class="hclcontent">

<!-- KODE SHOUTMIX ANDA DISINI -->

<br /><div class="hc-credit">
<span style="float:left">
<span style="float:right"><a href="javascript:showHidehcl()">[close]</a></span></div></div><div class="hcltab" onclick="showHidehcl()"> </div></div><script type="text/javascript">var hcl = document.getElementById("hcl");hcl.style.left = (30-hcl.offsetWidth).toString() + "px";</script>
<!-- left hidden chatbox END -->

<!-- right hidden chatbox START -->
<style>
#hcr {position:fixed;top:100px;z-index:+1000;}
* html
#hcr {position:relative;}

.hcrtab {height:125px;width:40px;float:left;cursor:pointer;background:url('http://i930.photobucket.com/albums/ad144/w4w4y/Logo%20button/e3022f03a112153e97187677e5bb0a097227405a.png') no-repeat;}

.hcrcontent {float:left;border:2px solid #003e82;background:#ffffff;padding:10px;}

.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}</style>
<script type="text/javascript">function showHidehcr(){var hcr = document.getElementById("hcr");var w = hcr.offsetWidth;hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);hcr.opened = !hcr.opened;}function movehcr(x0, xf){var hcr = document.getElementById("hcr");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;hcr.style.right = x.toString() + "px";if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}}</script><div id="hcr"><div class="hcrtab" onclick="showHidehcr()"> </div><div class="hcrcontent">

<!-- KODE SHOUTMIX ANDA DISINI -->

<br /><div class="hc-credit"><span style="float:left
<span style="float:right"><a href="javascript:showHidehcr()">[close]</a></span></div></div></div><script type="text/javascript">var hcr = document.getElementById("hcr");hcr.style.right = (30-hcr.offsetWidth).toString() + "px";</script>
<!-- right hidden chatbox END -->