var base = { productFilterSetup: function() { $('.productFilter').each( function() { var tmp = new base.filterGroup(this); tmp.setup(); }); }, filterGroup: function(filter_group) { var me = this; me.target_element = filter_group; me.active_element_index = 0; me.setup = function() { $(filter_group).find('input[type=radio]').bind('click', function() { me.update(this); }); }; me.update = function(target_radio) { var fieldsets = $(me.target_element).find('fieldset'), len = fieldsets.length, i = 0, j = 0, radios, radios_len, options = [], options_buffer = '', num_of_steps = 0; for (i = 1; i <= num_of_steps + 1; i += 1) { if ($('fieldset.step' + i).length > 0) { num_of_steps += 1; } } for (i = 0; i < num_of_steps; i += 1) { if ($(target_radio).parents('fieldset.step' + (i + 1)).length > 0) { for (j = i; j < num_of_steps; j += 1) { $('fieldset.step' + (j + 2) + ' input[type=radio]').attr('checked', false); } } } for (i = 0; i < len; i += 1) { radios = $(fieldsets[i]).find('input[type=radio]'); radios_len = radios.length; for (j = 0; j < radios_len; j += 1) { if ($(radios[j]).is(':checked')) { options.push(j + 1); } } } fieldsets.addClass('hide'); $('fieldset.option0').removeClass('hide'); for (i = 0; i < options.length; i += 1) { options_buffer += options[i]; $('fieldset.option' + options_buffer).removeClass('hide'); } }; } }; $( function() { base.productFilterSetup(); });
<form action="#" id="unique_id" class="productFilter"> <fieldset class="step1 option0"> <legend>Lorizzle ipsizzle (Q1)</legend> <p> <input id="question_1" name="group_1" type="radio" /> <label for="question_1">Yes!</label> </p> <p> <input id="question_2" name="group_1" type="radio"/> <label for="question_2">No.</label> </p> </fieldset> <fieldset class="hide step2 option1"> <legend>Sizzle pizzle (Branch 1)</legend> <p> <input id="question_1_1" name="group_2" type="radio" /> <label for="question_1_1">True</label> </p> <p> <input id="question_1_2" name="group_2" type="radio" /> <label for="question_1_2">False</label> </p> </fieldset> <fieldset class="hide step2 option2"> <legend>Grizzle fipdizzle (Branch 2)</legend> <p> <input id="question_2_1" name="group_3" type="radio" /> <label for="question_2_1">True</label> </p> <p> <input id="question_2_2" name="group_3" type="radio" /> <label for="question_2_2">False</label> </p> </fieldset> <fieldset class="hide step3 option11"> <legend>Suscipizzle lorizzle (Branch 1 1)</legend> <p> <input id="question_1_1_1" name="group_4" type="radio"/> <label for="question_1_1_1">Yea</label> </p> <p> <input id="question_1_1_2" name="group_4" type="radio"/> <label for="question_1_1_2">Nay</label> </p> </fieldset> <fieldset class="hide step3 option12"> <legend>Suscipizzle izzle (Branch 1 2)</legend> <p> <input id="question_1_2_1" name="group_5" type="radio"/> <label for="question_1_2_1">Yea</label> </p> <p> <input id="question_1_2_2" name="group_5" type="radio" /> <label for="question_1_2_2">Nay</label> </p> </fieldset> <fieldset class="hide step3 option21"> <legend>Macdizzle ma nizzle (Branch 2 1)</legend> <p> <input id="question_2_1_1" name="group_6" type="radio" /> <label for="question_2_1_1">Yea</label> </p> <p> <input id="question_2_1_2" name="group_6" type="radio" /> <label for="question_2_1_2">Nay</label> </p> </fieldset> <fieldset class="hide step3 option22"> <legend>Shizzle bizzle (Branch 2 2)</legend> <p> <input id="question_2_2_1" name="group_7" type="radio" /> <label for="question_2_2_1">Yea</label> </p> <p> <input id="question_2_2_2" name="group_7" type="radio" /> <label for="question_2_2_2">Nay</label> </p> </fieldset> </form> <p>Lorizzle ipsizzle doggy sit amizzle, shizzlin dizzle adipiscing nizzle. Nullizzle sapien velizzle, nizzle break yo neck, yall, suscipizzle da bomb, dizzle vizzle, sheezy.</p> <a title="A button, fo shizzle." href="#" class="buttonGreen"><span>Click me. Do it. Now!</span></a>
fieldset {margin:10px 0;} .hide {display:none;}