Decision Tree jQuery

Question

So, I'am trying to make a jQuery decision tree but I don't know how to make the script so that when I select the second question it goes to another tree without so many if statements.

Here is the code:

http://jsfiddle.net/iceman2hot4u/VGQ7n/1/

And I can't understand why

if($("#tbl1_1_1").is("visible"))
        {
            jQuery("#tbl1_1_1").hide();
            jQuery("#tbl1_1_1_a").show();
        }

is not working. I mean why the table with the id "tbl1_1_1" is not hiding and the "tbl1_1_1_a" is not showing.

Answer 1

You are doing the same loop over an over, nothing change try this:

jQuery("#tbl1_1").hide();
jQuery("#tbl1_1_1").hide();
jQuery("#tbl1_1_1_a").hide();
jQuery("#tbl2_1").hide();

jQuery(this).click(function()
    {
        if($("#tbl1_1_1").is(":visible"))
        {
            jQuery("#tbl1_1_1").hide();
            jQuery("#tbl1_1_1_a").show();
        }
        if($("#tbl1_1").is(":visible"))
        {
            jQuery("#tbl1_1").hide();
            jQuery("#tbl1_1_1").show();
        }
        if($("#tbl1").is(":visible"))
        {
            jQuery("#tbl1").hide();
            jQuery("#tbl1_1").show();
        }
        console.log("Ajunge aici.");
    });

This lines are now under a condition and not execute always.

    jQuery("#tbl1").hide();
    jQuery("#tbl1_1").show();

Without the condition, these sentences were getting executed on every click, and you enter on an infinite loop.