http://lmthemeslp-tut.tumblr.

com
WAY 2
This second way here is like the first in that it has no effects but this go aro
und you can actually toggle to hide/unhide the content. Like before you stick th
e following code in the HEAD section.
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
Now you specify the CSS (that means the following goes in the CSS section), depe
nding on what you want achieved you will say display or visibility:
.hidden {display: none;}
.unhidden {display: block;}
Display means that if it is display:none the space of the content is not still t
here. Aka will collapse the space.

WAY 3
The next two ways have effects related to them so if you're wanting a way to sho
w things more snazzily these would be for you.
WAY 3 EXAMPLE
The nice thing about this way is the transition and how it sort of glides out th
e content that you want to reveal and is easy to use. The following javascript r
ight above where you want to use it:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".sub").hide();
//toggle the componenet with class msg_body
jQuery(".cthrough").click(function()
{
jQuery(this).next(".sub").slideToggle(500);
});});
</script>
Also check in case you don't have a jquery script in your HEAD area already. If
you don't put the following in your HEAD area.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></
script>
Then you just mark up the HTML for the javascript to recognize:

<a href="#" class="cthrough">CLICK</a>

<div class="sub">
Stuff to be revealed
</div>
That's about it! Like all the ways you don't have to use "cthrough" or "sub" for
your labels. But do make sure that you correspond the ones I have in the exampl
e with where it is in the javascript.
I like to add:
style="cursor:help"
To the "CLICK" label just to differentiate it as a link. Because if you notice i
f you don't have it then it's just a text cursor.
If you are using this more than once in the page you will need to repeat the jav
ascript code as many times as you use it. AND you need to make sure that you don
't have the same call back labels as the first set you used.
EXAMPLE:
If in the first javascript and html your callbacks are: cthrough and sub
Then in the second one they CAN'T be exactly the same but they can be: cthrough1
and sub1
Makes sense?
The one draw back about this ways is that because of the javascript it takes a b
it to load so all the stuff you are hiding will be seen for a split second somet
imes until the page loads fully.

WAY 4
This last way is the last for a reason - because it's more code intensive and do
esn't rely on javascripts to reveal things. It uses transitions. So, if you aren
't comfortable with CSS/HTML this way is most likely not for you.
Unlike the rest of the ways this way doesn't require that you click on it to rev
eal your content but merely just hover over. So again, if you're wanting a click
action instead this is not the way you most likely want to use.
For this way all you really need is CSS and HTML but the draw back is you will n
eed to know a more approximate height for what you are revealing.
First let's look at why this is in the CSS:
#bx {height: 15px; overflow: hidden;
transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;}

#bx:hover {height: 40px;

transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;}
See how it's merely just changing the height with transitions? This is why when
you want to use this way and your content will be different than the example you
will have to experiment with the heights.
Let's mark up the HTML then I can exaplain it a bit better:
<div id="bx">
<a style="margin-top: 20px;">HOVER</a>
<div class="substuff">Stuff to be revealed</div></div>
See how both the "Hover" and the stuff to reveal are in the bx div? By making th
e CSS style of #bx just the height of the "Hover" it doesn't show the stuff to r
eveal because of overflow:hidden. But when you look at #bx:hover you see the hei
ght is larger and so then it includes the stuff to be revealed and causes that e
ffect.
You technically don't need to wrap the "Stuff to be revealed" in another div cla
ss but if you want to style it differently than your "Hover" label then you will
need to!