Question

I have two <div> elements:

<div id="hidden"> 

<div id="hideitem">
<input id="item5" type="radio" class="item" name="item" value="gen"/>General Function
</div>

I set <div id="hidden"> to display:none. I want it to show when the radio button is clicked:

$("#item5").click(function() {
    $("#hidden").show();
}

But how can I hide <div id="hideitem"> after <div id="hidden"> is shown?

Answer 1

Like most jQuery fx methods, .show() has a optional parameter where you can serve a callback function. The function you pass there is executed after the fx effect has finished.

$('#hidden').show('fast', function(){
   $('#hideitem').hide();
});

That would pass an anonymous function as parameter, which is called after the effect. It just hides the #hideitem object then.
You’ll notice that I’ve added an additional parameter 'fast'. That is the duration jQuery uses to execute the fadeout (can also be a number in ms). It really only makes sense to use it like this, because otherwise, .show() will just set the display property to block. Without a duration we have no delay. So a callback function for that would get invoked immediately.

If you want to show and hide that elements simultaneously just call both

$('#hidden').show();
$('#hideitem').hide();