Click to show none / block with legend

Question

I do not know why another condition does not work, I tried several methods.

if($('hiddendDiv').attr('style') === 'display:none') {
    $('buttonDiv').click(function() {
        $('hiddendDiv').attr('style',"display:block");
    }); 
} else {
    $('body').click(function(){
        $('hiddendDiv').attr('style',"display:none");
    });
}

hiddendDiv It has style="display:none"

When I click the button buttonDiv, it hiddenDivreceives display: block, and after that, when I click anywhere on the page (to close hiddenDiv), it hiddenDivdoes not receive display: none.

I am trying to create <div>one that opens when I click the button, and closes when I click anywhere on the page.

Answer 1

buttonDiv hiddendDiv () arent; , #. , , .

if ($('#hiddendDiv').is(':visible')) {
    $('body').click(function () {
        $('#hiddendDiv').hide();
    });
} else {
    $('#buttonDiv').click(function () {
        $('#hiddendDiv').show();
    });
}

, . Id :

$('body').click(function () {
    $('#hiddendDiv').hide();
});

$('#buttonDiv').click(function (e) {
    $('#hiddendDiv').show();
    e.stopPropagation();
});

. #hiddendDiv , , #hiddendDiv, #buttonDiv.

Answer 2

$(document).on('click', '#test', function () {
    if ($('#text').hasClass("disabled")) {
        $('#text').css("display", "none");
        $('#text').removeClass('disabled');
    }
    else
    {
        $('#text').css("display", "block");
        $('#text').addClass('disabled');
    }

});

Hide result