Cool Collapse/Expand Animation Effect

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!

ServiceNow Collapse-Expand Effect

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

Date Posted:

April 19, 2011

Share This:

One Comment

  1. Sean Grison April 20, 2011 at 1:43 am

    Cool!

Comments are closed.

Categories

Tags

Loading

Fresh Content
Direct to Your Inbox

Just add your email and hit subscribe to stay informed.