views:

116

answers:

1

Hi, 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


}); 
+1  A: 
Ender
Hi - thats great it works! Thank you so much. I tried a few different things but just couldnt get it to work. Im still learning JS really, so still a bit of a noob.The only thing with this now is, when the #commenttype DIV fadesOut the #ccform_container snaps or jumps up to where the #commenttype DIV was (before it faded out). This kinda takes away from the smooth animations that the user sees previously.Is there anyway we can make the #ccform_container move slowly or smoothly up to where #commenttype DIV was rather than snap back up?
Phil
I have edited my answer per your request.
Ender