Javascript show/hide code with fade transition

[ruaidhrix]

I looking to get some help for this javascript show/hide code. I was wondering if it's possible to add in a few lines for a fade in/fade out transition to make the content fade gradually, rather than just roughly transition from one content to the next. An example of the code I'm using is displayed here: www.javascriptkit.com/javatutors/dom3.shtml


This is the coding used:
<a href="javascript:hideshow(document.getElementById('adiv'))">Click here</a>

<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>

<div id="adiv" style="font:24px bold; display: block">Now you see me</div>


As you can probably see, when you click “Click here”, you can toggle the “Now you see me” line to show and hide. However, there isn't a transition, so it doesn't look as smooth as I'd like. If it's possible to plug in a few lines to add a fadein/fadeout effect, that'd be great. I've been poking around for a couple of days but only came up with completely different codes in jQuery, which I'm not very practiced in.

Thank you!


If it helps at all, an idea of what I want the fade to look like is here: mysidia-rpg.com/index.php

When you click on the boards ("Gallovian City", "Ebor Harbor", "Euphica Square" etc.) it makes the images to the left fade in and out.

[Wormopolis]

yeah jQuery is what you are after on this. its going to be much easier to use one of them then to write a completely new code. similar to builing an entirely new house because you dont like the color of your current one.

in fact your example site is USING jQuery to do the animation you like.