Hide or Show Container or Field Using Style

Forms
1

Good Morning,

I would like to switch using the style property to show or hide of a container or a field.

I’ve discovered that using the style property with “display: none;” instead of using JS code

$('.field-to-hide').hide();

to hide a container or a field can stop it from flashing on the screen when the form is launched.

I have been trying to use class and css to update the style property with no success. See examplea below.

$('.RequestInfo').css('display', 'none');
$('.RequestInfo').css('display', 'block');

What is the JS codes to show or hide a container (Grid) using “display: none;” or “display: block;” in the style property?

What is the JS codes to show or hide a field using “display: none;” or “display: block;” in the style property?

Thank you very much!

2

Dear @COR6603,
It really is not about how the field is hidden, but rather when it is hidden. If you hide it with CSS style, it will not flash as it's not shown from the very beginning.

If you hide it with JavaScript, there is a slight delay after which the field becomes visible, but not yet hidden with JavaScript. As an example, this will also flash for a brief moment:

fd.spRendered(function(){
  $('.class-to-hide').attr('style','display:none;');
});

Instead, you can hide field with CSS to begin with:

.class-to-hide{
  display:none;
}

And then make it visible with JavaScript, like this:

$('.class-to-hide').attr('style','display:block;');
3

It works perfectly! Thank you for the helpful explanation and guidance!

1 Like