Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Hide/Show Widget Contents
Mottie (MVP) 12/24/2009 6:49 PM EST : Hide/Show Widget Contents
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hide/Show Widget Contents

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.
TopBottom

shadowstts (Guild Admin) 3/7/2010 6:44 PM EST : RE: Hide/Show Widget Contents
shadowstts
Posts: 364
Fingers of Fury!

dosnt work for the site layout im using

the icon by the boxes come up but when i click them nothing hapends

Asylum RULES!

TopBottom

Mottie (MVP) 3/8/2010 9:12 AM EST : RE: Hide/Show Widget Contents
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi shadowstts!

Ok, sorry about that, it seems your layout did have some different classes. I've included them and the script should work for your site now
TopBottom

Salheart (New Admin) 4/6/2010 11:30 PM EST : RE: Hide/Show Widget Contents
Salheart
Posts: 17
Becoming Adept!

Hi Mottie!

I was wondering if you could use custom images instead of the (-) and (+).

My site is here.

TopBottom

Mottie (MVP) 4/7/2010 1:04 AM EST : RE: Hide/Show Widget Contents
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Salheart!

I think I explained it clear enough in my instructions (quoted below)... did you try this and it wasn't working for you? If not, could you tell me where you are getting stuck so you can help me improve my instructions.

Mottie said:

  • 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
TopBottom

Salheart (New Admin) 4/7/2010 10:27 PM EST : RE: Hide/Show Widget Contents
Salheart
Posts: 17
Becoming Adept!

wow, totally missed that... thanks!
TopBottom

Fenris Nihilus (Guild Admin) 5/16/2011 12:07 AM EST : RE: Hide/Show Widget Contents
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves

This is wonderful, however could I request a change in your script. Just a slight one.
Instead of allowing the code to apply this to all widgets except the ones specified under don't hide. Could you apply the code to no widgets unless specified under "hide". 
Otherwise some people would have to type in a lot of things to not hide when you only want this to apply to 5% of your site.

Or could I apply this to a free/form html box for 1 specific page and thus tell it which widgets on that page not to hide?
Click Image to Visit Our Eve Corperation: The White Rose Conventicle
TopBottom

Mottie (MVP) 5/16/2011 8:59 AM EST : RE: Hide/Show Widget Contents
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Jacklet159!

Yeah, I know I should have written it that way, but you could also just add this script to a free form text/HTML widget on one page and just apply this script to one page. If I have time I'll rewrite this script... been busy busy busy!!
TopBottom

Fenris Nihilus (Guild Admin) 5/16/2011 5:18 PM EST : RE: Hide/Show Widget Contents
GP User: Jackel159
Jackel159
Posts: 86
Posts With Wolves

I tried it in a free form box on my Tools Page and yet no matter what it won't work. Any suggestions for what I can do?
Click Image to Visit Our Eve Corperation: The White Rose Conventicle
TopBottom

Mottie (MVP) 5/16/2011 6:52 PM EST : RE: Hide/Show Widget Contents
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

A lot of scripts on that page don't work. Because you included a link to the prototype javascript library.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
The problem is that Prototype uses "$" to access IDs and jQuery also uses "$" to refer to jQuery. There is a jQuery.noconflict() in there but all of the code I have written doesn't account for the other library so none of them work properly.

I looked at what the prototype code is used for and it seems like it is for a dropdown? I can't tell, I don't know prototype. So try removing that other library, because essentially everything else on that page is using jQuery.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%