How to show or hide your left and right side content boxes

GuildPortal admin site link to original post

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 it 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 the Home page 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

The code above sets the scripts with default settings. Here is code that shows all the default settings:

 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
     });
    

* NOTE: if adding options to the hideSides() function, make sure the LAST option does not have a comma at the end - this will break the script in IE.

Edit (1/19/2009): Updated the code to use jQuery to stop errors
Edit (4/24/2010): Updated script to allow text and doesn't switch and a few other variables.