Question

I have a grid of buttons in my code where the user clicks on the word “click here” and the grid of buttons would be displayed. This uses jquery, what I want to know is that does anyone know a way so that the user can click on a text box and what happens is that the grid of buttons appear and if the user clicks on a button or clicks away from the grid, the grid disappear again. In other words I want it to work exactly how the Jquery datepicker works (to see the datepciker jquery please click here

To see my code then it is in jsfiddle, click here

Answer 1

Try this:

UPDATED

$('#showGrid').click(function(e) {
    if ($('#gridone').css("display") == "table") {
        $('#gridone').hide();
    }
    else {
        $('#gridone').css("display", "table");
    }
    e.stopPropagation();
});

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

$('#gridone  input').click(function(){
    $('.box INPUT').val($('.box INPUT').val() + $(this).val() );
    $('#gridone').hide();
});

Example fiddle