Question

this is my first time posting on here and have read alot of helpful stuff over the past few weeks since I found the site!

So, my question is: I have the following code on my site and what im trying to do is…

• When an element (.btn-leavecomment) is clicked,

• a hidden div (#commenttype) is revealed via slideDown.
  This hidden div contains two radio buttons.

• On click/selection of the ‘first’ radio button (.reveal_ccform) I would like another hidden div to be revealed (I have this all working up to here)

• I’d then like the first hidden div (which contains the radio buttons (#commenttype)) to then disappear and fadeOut (once the user has selected only the first radio button of the two. The second radio button redirects to another page in case you were wondering.)

Can anyone help with getting that last point (to fadeOut the first hidden div) on click of the first radio button?

Thank you

My Code:

$(document).ready(function(){

  // Click first element (.btn-leavecomment)
  // and reveal first hidden DIV (#commenttype)
  $(".btn-leavecomment").toggle(function(){   
        $("#commenttype").stop().animate({ down: "+=300" }, 3000)      
        $("#commenttype").stop().slideDown("slow");
   }, function(){
        $("#commenttype").stop().animate({ down: "-=300" }, 1400)      
        $("#commenttype").stop().slideUp("slow");  
  });     


  // on click of first radio (.reveal_ccform)     
  // Reveal second hidden DIV (ccform_container) 
  $(".reveal_ccform").toggle(function(){   
  $("#ccform_container").stop().animate({ down: "+=600" }, 6000)      
  $("#ccform_container").stop().slideDown("slow");    


  //fadeOut #commenttype onClick of .reveal_ccform after #ccform_container slidesDown


}); 

Answer 1

I feel like I must be missing something, because this seems pretty simple compared to what you’re already doing, but here you go:

$('.reveal_ccform').click(function() {
    $('#commenttype').fadeOut();
});

******EDIT****

For a smoother and more complex animation as per the request in the following comment, do something like this:

$('.reveal_ccform').click(function() {
    $('#commenttype').animate({height: 0, opacity: 0}, function() {
        $(this).remove();
    });
});

This will create a custom animation to fade out the div containing the radio buttons while simultaneously reducing the height to zero, which will solve the jumping issue. The callback function removes the div after the animation is complete (not a necessary step, but keeps the DOM in line with what the user is seeing).

See the result: http://jsfiddle.net/8bCAg/