Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Layout & Theme > How to hide & show information
Mottie (SuperAdmin) 12/7/2008 4:39 AM EST : How to hide & show information
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

How to Hide & Show Information

GuildPortal admin site link to original post

Show
Hide
 

This script uses the same method that the "Game News" section uses to show and hide content; but this script 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.

  • Link Example (click me)
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut at ipsum. In sem sem, ultricies sit amet, pulvinar vitae, imperdiet eu, ligula. Phasellus nunc. Proin porttitor, tortor nec cursus sodales, felis ante tristique risus, in pulvinar eros nisi eget arcu. Praesent justo. Cras consectetuer, mauris et luctus condimentum, orci velit consectetuer tortor, quis vulputate sapien tellus eu justo. Suspendisse vulputate ullamcorper ligula. Aenean in lorem. Vivamus enim sem, adipiscing nec, malesuada at, aliquet ac, magna. Mauris imperdiet imperdiet lectus. Integer arcu metus, dapibus vel, faucibus nec, fringilla adipiscing, dolor. Sed id lectus eu ante mattis lacinia. Quisque in quam. Nunc porttitor congue lorem. Nulla ante ipsum, aliquam id, venenatis vehicula, mollis non, lectus. In purus. Nullam tempor. Phasellus nec arcu sit amet quam interdum ultricies.
  • Image Example (click the image below)
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 anything between the "</a>" and "<div class="hideBox hide">"

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

      <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":

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

    .hideable {background: #222222;}

  • 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;
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 3/26/2009 1:38 PM EST : RE: How to hide & show information
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Would it be possible to just get the HTML code so we can cut / paste onto a thread?
TopBottom

Mottie (SuperAdmin) 3/30/2009 12:56 PM EST : RE: How to hide & show information
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Guppy Queen,

It's in the post above... just add and modify this:
<a class="hideLink" href="#">LINK TITLE</a>
<div class="hideBox hide">STUFF TO SHOW/HIDE</div>
Although I think the spoiler box works just as well now.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 3/30/2009 3:06 PM EST : RE: How to hide & show information
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Thanks Mottie. The spoiler box is a good feature, but I love that little + icon 

Could this code be added to a forum post? Or only on a content box?

TopBottom

Mottie (SuperAdmin) 3/31/2009 8:21 PM EST : RE: How to hide & show information
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Ok, I'll look into rewriting it and adding it to the forum modules
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 4/2/2009 6:28 PM EST : RE: How to hide & show information
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Done, check out Forum Modules v1.1
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 4/8/2009 2:52 AM EST : RE: How to hide & show information
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Thanks Mottie! I've been using this feature a lot now. Bunny Dance
TopBottom

Eldaberry (Member) 5/24/2009 1:07 PM EST : RE: How to hide & show information
Eldaberry
Posts: 15

0
Like

0
Dislike

Hi Mottie! I'm working on a test site and would like to try this for a long list of links. My question is, where does all the coding go?

BTW, thank you so much for all you do. I've already learned how to do alot for my actual guild's site.

TopBottom

Mottie (SuperAdmin) 5/24/2009 2:16 PM EST : RE: How to hide & show information
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Eldaberry!

The code from this script should go into the header HTML or Footer.

I actually think the better way to do this now would be to use the forum module to make the code for you. Start out by making a new post, then switch to HTML mode (), use the hide-show box forum module () , copy the code it makes then paste it into whatever area you wish. The Forum module code is written to stand alone, so it will work anywhere on your site with no extra coding or CSS.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%