Make a form collapse when clicked

Make a form collapse when clicked

How do I make is so that the form collapses when answered but if someone
changes their minds they can click the collapsed form and it opens back
up? I'm open to using javascript and jquery. I've searched the web for
collapsible forms in java and jquery but there aren't any that are
helpful.
Here's the form in jsfiddle: http://jsfiddle.net/itay1989/ffKKN/6/
Here's the javascript of the form:
$(document).ready(function () {
$('.radio div').on('click', function () {
var $this = $(this),
$parent = $this.parent(),
value = $this.attr('value');
$parent.children().removeClass('active');
$this.addClass('active');
$parent.attr('value', value);
//get all selected radios
var q1 = $('div[name="q1"].active');
var q2 = $('div[name="q2"].active');
var q3 = $('div[name="q3"].active');
var q4 = $('div[name="q4"].active');
//make sure the user has selected all 3
if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length
!== 0) {
//now we know we have 3 radios, so get their values
q1 = q1.attr('value');
q2 = q2.attr('value');
q3 = q3.attr('value');
q4 = q4.attr('value');
// activate button
$('#next_button').removeAttr('disabled');
//now check the values to display a different link for the desired
configuration
if (q1 == "AT&T" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
$('#next_button').val('att 8gb black').click(function () {
window.location.href = 'http://google.com/'
});
} else if (q1 == "AT&T" && q2 == "16GB" && q3 == "White" && q4 ==
"Black") {
document.getElementById("linkDiv").innerHTML = "<input
type=button
value=Next onclick=\"window.location.href='http://bing.com/';\">another
option</input>";
} else if (q1 == "AT&T" && q2 == "16GB" && q3 == "Black" && q4 ==
"Black") {
document.getElementById("linkDiv").innerHTML = "<input
type=button
value=Next
onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
} else if (q1 == "AT&T" && q2 == "8GB" && q3 == "White" && q4 ==
"Black") {
document.getElementById("linkDiv").innerHTML = "<input
type=button
value=Next
onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
} else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "White" && q4
== "Black") {
document.getElementById("linkDiv").innerHTML = "<input
type=button
value=Next
onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
} else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "Black" && q4
== "Black") {
document.getElementById("linkDiv").innerHTML = "<input
type=button
value=Next
onclick=\"window.location.href='http://webs.com/';\">orange</input>";
} else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "White" && q4
== "Black")
{
document.getElementById("linkDiv").innerHTML = "<input
type=button
value=Next
onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
} else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "Black" && q4
== "Black")
{
document.getElementById("linkDiv").innerHTML = "<input
type=button
value=Next
onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
} else if (q1 == "AT&T") {
document.getElementById("linkDiv").innerHTML = "<input
type=button
value=Next onclick=\"iphone4';\">blue</input>";
}
}
});
var questions = $(".question");
var showQuestions = function (index) {
for (var i = 0; i < questions.length; i++) {
if (i < index) {
questions.eq(i).css("display", "block");
} else {
questions.eq(i).css("display", "none");
}
}
if (index > 1) {
// only scroll to the questions after the first one is clicked
$('html, body').animate({
scrollTop : $(questions.eq(index - 1)).offset().top
},'slow');
}
}
for (var i = 0; i < questions.length; i++) {
(function (index) {
questions.eq(index).find("div[type='radio']").on("click", function
() {
showQuestions(index + 2);
})
})(i);
}
showQuestions(1);
}); //]]>