Cool Collapse/Expand Animation Effect

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!

Update: ServiceNow now includes a full prototype effects library that you can use to collapse and expand, and more! Check out this post for details.

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