Hide/Show Widget Contents

GuildPortal admin site link to original post

This code will add a link to your widget title (can be either an image or text) that you can click on to hide or show the contents of that widget. The script also saves a cookie so the browser will remember which widgets you have hidden the next time you come back to that page. Try out a demo on test-site 3.

Widget Contents Shown		Widget Contents Hidden

Code

---

---

Add this code to your banner or footer custom HTML

<style type="text/css">
 .showHideSelector { float: left; padding: 0 5px; cursor:pointer; }
</style>

<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/jquery.cookie.js"></script>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/hideshow.js"></script>
<script type="text/javascript">
// **********************
// Hide/Show Contents
// **********************
$(document).ready(function(){
 addHideShowToggle({
  showContent : "(+)",
  hideContent : "(-)",
  dontHide    : "Welcome|Online",
  linkOnLeft  : true
 });
})
</script>

Customizing

• Positioning the Link
  
  
  • You can position the link using CSS "float: left" or "float: right".
  • Adding padding "0 5px" sets the top and bottom padding to zero and the right and left padding to 5 pixels around the link.
  • If you need to position the link somewhere else then you'll need to position it relative to the title:
    
    
    
    • Left of Title: "position: relative; top: 0px; left: 0px;" - Adjust the top and left pixels to align the link.
    • Right of Title: "position: relative; top: 0px; right: 0px;" - Adjust the top and right pixels to align the link. If the link is still set on the left of the widget title, then set the linkOnLeft variable to false. What the script does then is physically adds the link to the right side of the title.


• Change the Show and Hide Content Link
  
  
  
  • The showContent variable default is "(+)" and the hideContent variable is set to "(-)".
  • If you prefer to use an image, then replace the text with HTML - "<img src='http://mysite.com/myimage.jpg'>" (Notice that the URL is surrounded by single quotes)
  • Make sure you limit the size of your image as it will stretch out the widget title


• Don't Hide
  
  
  
  • If there are particular widgets you don't want to have hidden, then set the dontHide variable with a key word from the widget title.
  • The Key word is case sensitive (capital letters matter).
  • Separate the key words with a pipe "|" (shift-\, above your enter key).
  • Note that the key word should be unique. Using a key word like "News" will prevent the script from adding the link to widgets with the title "Guild News", "Game News" and "News".

Edit (3/8/2010): Script updated to work with some sites with a different layout.