单击时使表格折叠

Question

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

}); //]]>

Answer 1

I think you can use jquery's toggle to hide and show elements. Maybe that can simplify your code and make it work. See here: http://api.jquery.com/toggle/