Show/ hide function.

Show/ hide function.

Hello,

Have a look on my site here: http://www.georgeharrisfinancial.com/dev/index.php at the video testimonials on the right. What I have is a show/hide javascript in place. What I want is to have the first div to hide after clicking "more.." that way only the video playlist shows. Than once "more.." is clicked again, it will toggle back to the original state. How is this achieved?

Here is my code in the head tags:
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>


Here is my html:
<div id="right">
 
<h2><span class="blue">Clients</span> Testimonials- <a href="#" onclick="showhide('script'); return(false);">More..</a></h2>
<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
   var FO = {   movie:"video/flvplayer.swf",width:"320",height:"260",majorversion:"7",build:"0",bgcolor:"#FFFFFF",allowfullscreen:"true",
      flashvars:"file=mccullough.flv&autostart=true" };
   UFO.create(   FO, "player1");
</script>

<div style="display: none;" id="script">
<p id="player2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
   var FU = {    movie:"video/flvplayer.swf",width:"320",height:"350",majorversion:"7",build:"0",bgcolor:"#FFFFFF",allowfullscreen:"true",
flashvars:"file=playlist.xml&displayheight=240&autostart=true " };
   UFO.create(   FU, "player2");
</script>
</div>

</div>