1. Make sure that the Left Navigation div is fixed in width, and the right content div is not set in width
2. Add the following code between the left-side content Div and the right-side content Div:
<Div style = "width: 10px; float: Left;">
<Table>
<Tr> <TD Height = "200px"> </TD> </tr>
<Tr> <TD> Onclick = "USR ()"/> </TD> </tr>
</Table>
</Div>
<SCRIPT>
Function USR (){
VaR img_arrow = Document. getelementbyid ("img_arrow ");
If (img_arrow.src.indexof ("arrow_left")> = 0 ){
// Shrink the left arrow name of arrow_left and the right arrow name of arrow_right
Img_arrow.src = img_arrow.src.replace ("arrow_left", "arrow_right"); // switch the arrow picture
Document. getelementbyid ("s4-leftpanel"). style. Display = "NONE"; // hide the left navigation bar
Document. getelementbyid ("mso_contenttable"). Style ["margin-left"] = "10px"; // modify and reduce the right-side navigation bar margin-left. The Arrow image width is 10px.
}
Else {
// Expand
Img_arrow.src = img_arrow.src.replace ("arrow_right", "arrow_left ");
Document. getelementbyid ("s4-leftpanel"). style. Display = "Block ";
Document. getelementbyid ("mso_contenttable"). Style ["margin-left"] = "203px ";
}
}
</SCRIPT>
Click the arrow to hide/show the left navigation bar