Example frameset.
<frameset id="frameSetUp" cols="25%,*">
<frame name="frameleft" src="leftpage.htm" scrolling="auto">
<frame name="frameright" src="rightpage.htm" scrolling="auto">
</frameset>
Copy the following into the <Head> section of the frameset document.
<script type="text/javascript"">
<!--
frame_default_size="25%,*"
function change_frame_size(){
if(document.getElementById("frameSetUp").cols!="10,*"){
document.getElementById("frameSetUp").cols="10,*"
}
else{
document.getElementById("frameSetUp").cols=frame_default_size
}
}
// -->
</script>
Copy the following into the <Head> section of the document which is going to be shown in the frame to be collapsed
<script type="text/javascript"> <!-- document.ondblclick=parent.change_frame_size --> </script>
<script type="text/javascript"">
<!--
var i=0
function duelButt(){
nowpos=document.body.scrollTop
i++
if(i==1){
parent.document.getElementById("frameSetUp").cols="20,*" // change to size you require
document.getElementById("hideShowButt").src="showme.gif"
}
if(i==2){
parent.document.getElementById("frameSetUp").cols="25%,*" // same as your original
document.getElementById("hideShowButt").src="hideme.gif"
i=0
}
setTimeout("document.body.scrollTop=nowpos",10) // return to position in page
}
-->
</script>
<a href="#null" onclick="duelButt()"><img src="hideme.gif" width="50" height="25" border="0" id="hideShowButt"></a>