How to Hide a Custom field

I have an add page which allows the user to enter a UK address to be stored on the DB (3 address lines, Town, and Post code fields). I want to 'manage' the content of the 3 address lines, so I have created 3 additional custom fields (Flat_no, House_no and Building_name) which I'd like to be visible/hidden based on the type of accommodation Flat or House.
I tested the basic idea using the code below which hides/shows a DB field from the Add Page. This code works perfectly.

// Hide some fields

var ctrl = Runner.getControl(pageid, 'accom_type');

if(ctrl.getValue() != 'Flat')

pageObj.hideField('street2');

ctrl.on('change', function(){

if (this.getValue() == 'Flat'){

pageObj.showField('street2');

}

else {

pageObj.hideField('street2');

}

});
Then I added the 3 custom fields, which display correctly on the Add Page. The difference between this code which doesn't work and the previous code is that it uses a Custom field. I've tried both '#Flat_no' and 'Flat_no' on the hide/show and it makes no difference.

// Custom field from page

this.on('beforeSave', function(formObj, fieldControlsArr, pageObj){

var val = $("#Flat_no").val();

formObj.baseParams['Flat_no'] = val;

});

this.on('beforeSave', function(formObj, fieldControlsArr, pageObj){

var val = $("#House_no").val();

formObj.baseParams['House_no'] = val;

});

this.on('beforeSave', function(formObj, fieldControlsArr, pageObj){

var val = $("#Building_name").val();

formObj.baseParams['Building_name'] = val;

});
// Hide some fields

var ctrl = Runner.getControl(pageid, 'accom_type');

if(ctrl.getValue() != 'Flat')

pageObj.hideField('#Flat_no');

ctrl.on('change', function(){

if (this.getValue() == 'Flat'){

pageObj.showField('#Flat_no');

}

else {

pageObj.hideField('#Flat_no');

}
I searched the forum but couldn't find anything related to hiding a custom field.
The obvious workaround is to be add the 3 custom fields to the DB record......
Thanks