How to turn of toggle effect?

I had the following code:

$('#commentToggle').toggle(function () {
                    $("area").css({cursor: "pointer"})
                    $('#area1').toggle(function () {
                    $("#commentary-box").css({display: "block"})
                    $("div#1").css({display: "block"})
                    $( "div" ).not( "#1" ).css( {display: "none"} );
                    },

                    function () {
                    $("#commentary-box").css({display: "none"})
                    $("div#1").css({display: "none"});
                    });

                    },
                    function () {
                    $("area").css({cursor: "auto"}),
                    $("area").noop();
                    });

The desired effect is the following: when you click on #commentToggle (it's a checkbox), you will be able to click different area on an image, and see different text in the right (in the#commentary-box), but when you click again on the checkbox, you should be able to click anywhere on the image, without showing any text.

But now, until you don't click on the checkbox, you can't trigger anything on the image, just when you click on the chekbox, but (this is the problem) if you click on the checkbox again, you are still able to trigger the #commentary-box. I hope somebody could help me.

Thanks for reading and for the answers!