Adding the script

• Free site: Copy (Ctrl-C) and Paste (Ctrl-V) the code while in HTML mode () into any Free Form Text/HTML content box. You'll have to add this to each page - or paste the code into the footer
  
  
• Paid site: Copy (Ctrl-C) and Paste (Ctrl-V) the code into the header or footer area to effect every page on your site. It does the rest
  
  
• Check out my test-site Home page (link at the bottom) and look to either side of my "Welcome" box, you'll see a small arrow on either side. Click on them to see what happens.

The Code

<style type="text/css">
// Entire spacer
.LeftContentSpacer, .RightContentSpacer {
 vertical-align: top;
 cursor: pointer;
}
// Hide/Show link style
.LeftContentSpacer a, .RightContentSpacer a {
 color: #bbbbbb;
 font-weight: bold;
 font-size: 12px;
}
// style shown when you hover over the spacer
.LeftContentSpacer.hover, .RightContentSpacer.hover {
 background: #333;
 opacity: 0.7;
 filter: alpha(opacity=70);
}
</style>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/hideshow-zone-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 hideSides();
})
</script>

Customizing the script

 hideSides({
  hideIndicator    : "&lsaquo;",
  showIndicator    : "&rsaquo;",
  switchIndicators : false,
  tooltip          : "Click to hide/show side bar",
  tooltipWidth     : 180,
  clickableSpacer  : true
 });

• Styling CSS:
  
  
  • The entire spacer, where the link goes, has CSS to make the cursor change into a pointing finger when you hover over it and it put the indicator at the top of the page.
  • The link color is in blue. You can also adjust the "font-weight" and "font-size" if you prefer.
  • There is a new class called "hover" that is added when you hover over the spacer. In the CSS above, it changes the background color and makes it slightly transparent (optional).
    
    
• Changing the Indicator:
  
  
  • By default, the indicators are arrows. Note that the indicator switches depending on which side it is on and if the side content is shown or hidden. So if you add text like "hide" or "show" it doesn't work as you expect. This is why I added the "switchIndicators" variable - set to true by default to work properly with arrows, but set to false if using text. Here is an example:
    
     hideSides({
      hideIndicator    : "h<br>i<br>d<br>e",
      showIndicator    : "s<br>h<br>o<br>w",
      switchIndicators : false
     });
    
    
  • If you want to use different arrows, don't change the "switchIndicators" value:
    
     hideSides({
      hideIndicator : "<-",
      showIndicator : "->"
     });
    
    Yeah I know those arrows are ugly, but you should get the idea.
    
    
  • If you are going to use an image, use single quotes around the src instead of double quotes:
    
     hideSides({
      hideIndicator : "<img src='image1.jpg'>",
      showIndicator : "<img src='image2.jpg'>"
     });
    
    
• Tooltip
  
  
  • Modify the tooltip text using the "tooltip" variable
  • Modify the tooltip width by adjusting the "tooltipWidth" variable in red
  • Note: The modified tooltip script is required for this option to work properly.
    
     hideSides({
      tooltip      : "Click me darnit!",
      tooltipWidth : 100
     });
    
    
• Clickable area
  
  
  • By default, the entire spacer is clickable.
  • You can make only the text/arrow clickable by setting the "clickableSpacer" variable to false
    
     hideSides({
      clickableSpacer  : false
     });