javascript - All questions must stay visible depending on the user's path -

javascript - All questions must stay visible depending on the user's path -

i have quote form pretty extensive... need add together code wi allow questions remain visible instead of hiding after selection made.

i.e user in either business path (all table1,11,12,13,14,15,16), resident's path (all table2,21,22,23,24,25,26, or have list path (all table3).

here fiddle http://jsfiddle.net/xuvub/

snippet of code:

<script type="text/javascript"> function show_table(id){ document.getelementbyid('table1').style.display='none'; document.getelementbyid('table11').style.display='none'; document.getelementbyid('table12').style.display='none'; document.getelementbyid('table13').style.display='none'; document.getelementbyid('table14').style.display='none'; document.getelementbyid('table15').style.display='none'; document.getelementbyid('table16').style.display='none'; document.getelementbyid('table2').style.display='none'; document.getelementbyid('table21').style.display='none'; document.getelementbyid('table22').style.display='none'; document.getelementbyid('table23').style.display='none'; document.getelementbyid('table24').style.display='none'; document.getelementbyid('table25').style.display='none'; document.getelementbyid('table26').style.display='none'; document.getelementbyid('table3').style.display='none'; document.getelementbyid('table'+id).style.display='block'; } </script>

i think want this: http://jsfiddle.net/s9bse/

html:

<div class="level-1"> <p>are dead or alive?</p> <ul> <li><a href="#dead" data-level="2">dead</a></li> <li><a href="#alive" data-level="2">alive</a></li> <li><a href="#schrodingers_cat" data-level="2">both</a></li> </ul> <div id="dead" class="hidden level-2"> <p>do have physical form?</p> <ul> <li><a href="#corpse" data-level="3">yes</a></li> <li><a href="#ghost" data-level="3">no</a></li> </ul> <div id="corpse" class="hidden level-3"> <p>you corpse</p> </div> <div id="ghost" class="hidden level-3"> <p>you ghost</p> </div> </div> <div id="alive" class="hidden level-2"> <p>do have 9 lives?</p> <ul> <li><a href="#regular_cat" data-level="3">yes</a></li> <li><a href="#maybe_human" data-level="3">no</a></li> </ul> <div id="regular_cat" class="hidden level-3"> <p>you cat</p> </div> <div id="maybe_human" class="hidden level-3"> <p>you might human</p> </div> </div> <div id="schrodingers_cat" class="hidden level-2"> <p>you cat , belong schrödinger</p> </div> </div>

css

.hidden { display: none; }

javascript (with jquery)

$("a").on("click", function () { var id = $(this).attr("href"); var level = $(this).data("level"); $(".level-" + level).addclass("hidden"); $(id).removeclass("hidden"); });

please excuse me introducing jquery, should @ to the lowest degree create clear how 1 might solve problem.

javascript forms conditional