Have 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);

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'));