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