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! > How to Hide & Show Information Boxes
Mottie (MVP) 12/7/2008 4:44 AM EST : How to Hide & Show Information
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hide & Show Information

Show
Hide
 

This script uses the same method that the "Game News" section uses to show and hide content; but this script makes it easier for you to add your own sections. And it adds two ways to allow you to show and hide content: (1) The first way has you click on a link to show and hide the content, (2) The second way has you click on an image to show and hide the content. Add the code below into the header or footer area of your site.

Check out this post on my test-site to see it in action

The Code
<style type="text/css">
.hide { display:none; }
.hideable { background: #222222; padding:5px; }
.hBox { padding:5px; }
.hShow { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/minus.png) no-repeat; height:14px; position:relative; left:-2em; top:-1em; }
.hHide { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/plus.png) no-repeat; height:14px; position:relative; left:-2em; top:-1em; }
</style>
<script type="text/javascript">
$(document).ready(function() {
 var hideshowSpeed = 500;
 $(".hideable").each(function(){
  $(this).wrap("<div class='hWrap'></div>").before("<div class='hShow'></div>");
 })
 $(".hWrap").click(function(){
  $(this).find(".hShow").toggleClass("hHide");
  $(this).find(".hideable").slideToggle(hideshowSpeed);
 });
 $(".hide").prev(".hShow").toggleClass("hHide");
 $(".hLink").each(function(){
  $(this).attr("href","javascript:void(0);").click( function() {
   $(this).next(".hBox").toggle(hideshowSpeed);
  })
 })
});
</script>
Using the Code
  • Link - Click on a link to show/hide content:

    • Add the following HTML with the named classes (in purple)

      <a class="hideLink" href="#">LINK TITLE</a>
      <div class="hideBox hide">STUFF TO SHOW/HIDE</div>

    • Note: There can't be any HTML between the "</a>" and "<div class="hideBox hide">"

    • If you want to start out with the box content showing, remove the class "hide" (in greenl).

      <div class="hideBox">

  • Image - Click on an image to show/hide the content:

    • Add the class "hideable" (in blue) to any HTML element:

      <blockquote class="hideable">... </blockquote>
      <div class="hideable">... </div>
      <code class="hideable">... </code>
      <ul class="hideable">... </ul>

    • If you want to start out with the box hidden, add the class "hide" (in green):

      <blockquote class="hideable hide">... </blockquote>
Customizing
  • The hide/show box background can be changed in the CSS (in red)

    .hideable {background: #222222; padding:5px; }

  • If you want to change or move the location of the image, change the URL in orange or the position by adjusting the numbers in red (em is based off the font size). The negative number moves the image left and up.

  • Adjust the speed of the animation (in red) in the code. The number is the animation time in milliseconds: hideshowSpeed = 500;
TopBottom

Kaysi (Guild Admin) 12/8/2008 10:20 AM EST : RE: How to Hide & Show Information

Kaysi
Posts: 445
Fingers of Fury!

You are amazing! Thank you! 

PS I hope your move is going well!
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

Mottie (MVP) 12/8/2008 1:55 PM EST : RE: How to Hide & Show Information
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Thanks Kaysi... I'm actually all moved in. I'm busy with other stuff now, so not trolling these boards as often as I was. But thanks for asking!
TopBottom

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