Site logo
Site logo
myExtraContent1
myExtraContent2

I get by with a little help from my friends......

Site logo
Site logo
Site logo
Site logo
myExtraContent3
myExtraContent4
myExtraContent5
myExtraContent6
myExtraContent7
myExtraContent8
myExtraContent9
myExtraContent10
myExtraContent11
myExtraContent12
myExtraContent13
I have had a lot of emails asking how to create the effect shown on the main Exposer Pro page (The effect with the bottle caps). In short, people want to know how to have a link open one Exposer hidden area and simultaneously close another. It is not a difficult effect to create. I have prepared a downloadable file you can grab with a demo project with 7 different Exposers working together and a text document with an explanation and code in it. Grab your copy here.

I will summarize what is in the document:

Let's assume you have three hidden areas, hidden1, hidden2 and hidden3

Try this:
For hidden1 link......

$j('#hidden1').show('slow');$j('#hidden2, #hidden3').hide('slow');return false;


For hidden2 link......

$j('#hidden2').show('slow');$j('#hidden1, #hidden3').hide('slow');return false; 


For hidden3 link......

$j('#hidden3').show('slow');$j('#hidden1, #hidden2').hide('slow');return false; 


Notice in each line of code above, we have used the command .show to target the hidden content to reveal and the command .hide to hide the content areas we don't want displayed. This makes use of the standard transition where content appears from the lower left and increases to the upper right and is just the reverse when being hidden. For a different effect, you can have the transition move straight up or down like a window shade. To accomplish this, we use .slideDown for the content to reveal and .slideUp for the content to hide. The last link in the downloadable sample file has this sort of transition so you can see it in action.
So if you wanted this sliding transition to show for the hidden1 link, you'd use:

$j('#hidden1').slideDown('slow');$j('#hidden2, #hidden3').slideUp('slow');return false; 


Points to remember:
You can add as many hidden areas as you want as long as you name them correctly (start with a #) and separate with a comma.