Show one <div> and hide another

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

Hi! maybe you can just do something like this:

$("#item5").click(function(){

                         $("#hidden").show();
                         $("#hideitem").hide();
                         }

Answer 2

You should be able to just hide it:

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

Answer 3

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();

Answer 4

To make this function so that keep switching div's use a toggle statement

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