Javascript 单击时使窗体折叠

我该如何使表单在回答时折叠，但如果有人改变主意，他们可以单击折叠的表单并将其重新打开？我愿意使用javascript和jquery。我在web上搜索了java和jquery中的可折叠表单，但没有任何有用的

以下是JSFIDLE中的表单：

以下是表单的javascript：

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

}); //]]>

$（文档）.ready（函数（）{
$（'.radio div'）。在（'click'，函数（）{
变量$this=$（this），
$parent=$this.parent（），
value=$this.attr（'value'）；
$parent.children（）.removeClass（'active'）；
$this.addClass（'active'）；
$parent.attr（'value'，value）；
//获取所有选定的收音机
变量q1=$（'div[name=“q1”].active'）；
var q2=$（'div[name=“q2”].active'）；
变量q3=$（'div[name=“q3”].active'）；
变量q4=$（'div[name=“q4”].active'）；
//确保用户已选择所有3个选项
如果（q1.length！==0&&q2.length！==0&&q3.length！==0&&q4.length！==0）{
//现在我们知道我们有3台收音机，所以获取它们的值
q1=q1.attr（“值”）；
q2=q2.attr（“值”）；
q3=q3.attr（“值”）；
q4=q4.attr（“值”）；
//激活按钮
$（“#下一步按钮”）.removeAttr（'disabled'）；
//现在检查这些值以显示所需的不同链接
配置
如果（第一季度==“AT&T”&第二季度==“8GB”&第三季度==“黑色”&第四季度==“黑色”）{
$（“#下一个按钮”）.val（'att 8gb黑色'）。单击（函数（）{
window.location.href=http://google.com/'
});
}否则如果（q1==“AT&T”和q2==“16GB”和q3==“白色”和q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“其他
选择权”；
}否则，如果（q1==“AT&T”&&q2==“16GB”&&q3==“黑色”&&q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“oops”；
}否则如果（q1==“AT&T”和q2==“8GB”和q3==“白色”和q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“不能”；
}否则，如果（q1==“解锁”和q2==“8GB”和q3==“白色”和q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“红色”；
}否则，如果（q1==“未锁定”&q2==“8GB”&q3==“黑色”&q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“橙色”；
}否则，如果（q1==“解锁”和q2==“16GB”和q3==“白色”和q4==“黑色”）
{
document.getElementById（“linkDiv”）.innerHTML=“绿色”；
}否则，如果（q1==“未锁定”&q2==“16GB”&q3==“黑色”&q4==“黑色”）
{
document.getElementById（“linkDiv”）.innerHTML=“蓝色”；
}否则如果（q1==“AT&T”）{
document.getElementById（“linkDiv”）.innerHTML=“蓝色”；
}
}
});
var问题=$（“.question”）；
var showQuestions=函数（索引）{
对于（var i=0；i1）{
//仅在单击第一个问题后滚动至问题
$（'html，body'）。设置动画({
scrollTop:$（questions.eq（index-1））.offset（）.top
}‘慢’；
}
}
对于（var i=0；i

我认为可以使用jquery的切换来隐藏和显示元素。也许这可以简化您的代码并使其正常工作。请看这里：