Unable to convert whole div to editable form

I am having a div of basic information and i have a button for edit when user clicks the edit button this Basic information div will be converted into form. I am using Jeditable! for this work. But issue is when user clicks on edit button my JavaScript function is invoked and then for editable i have to click on the field to edit but i want with one click form should be visible i do not have to go and click each field. The code for javascript method that is as below

            //  alert('ready');
        alert("I Got That All!!!");
        $('#name1').editable(' '
        );
        $('#name1').editable('enable');
        $('#BG1').editable(' ',
        {
            data: " {'1':'O+','2':'O-','3':'A+','4':'A-','5':'B+','6':'B-','7':'AB+','8':'AB-','selected':'1'}",
            type: 'select'
        }
        );
        $('#BG1').editable('enable');
        $('#DOB2').editable('');
        $('#DOB2').editable('enable');
        $('#MS1').editable(' ',
        {   data:  "{'1':'Single','2':'Married','3':'Engaged','selected':'1'}",
            type: 'select'
        }
        );

Solution

You need to attach the editable to a custom event, say custom.editable, and then trigger that same event when user clicks on the edit button (say it's ID is `#edit')

$('#edit').on('click', function() {
  $('.editable').trigger('custom.editable');
}

And configure your editable area as such:

 $('.editable').editable('... path ...', {
   event: 'custom.editable'
   ... more config ...
 }

See this fiddle: http://jsfiddle.net/f2akB/