H
ave you ever wondered how Service-now does the collapse and expand animations in the application sidebar? This same animation effect is also used when collapsing form sections or displaying service catalog variable hints. I discovered last night how this is done and you can do it to with a simple script!
All you have to do to show and hide form elements with a cool expand/collapse animation is pass the correct DOM element into the functions using a client script as shown below…
//Collapse a given form element...
collapseEffect(ELEMENT);
//Expand a given form element...
expandEffect(ELEMENT);
collapseEffect(ELEMENT);
//Expand a given form element...
expandEffect(ELEMENT);
So, if I wanted to collapse the ‘Comments’ field on the incident form…
collapseEffect(gel('incident.comments'));
Or if I wanted to expand that same ‘Comments’ field…
expandEffect(gel('incident.comments'));
Cool!