Before we start using custom JavaScript, let's work with the already included JavaScript to make our dashboard include animation. In this example, we will add additional controls to each chart to allow them to slide. This is advantageous in that you can give the user control to hide charts they are not interested in, or that take up too much space to see the charts they want to examine.

First, let's add the slide controls. Right after the panel-element-row div tag for the two charts, you will see a panel-head div tag. After the panel-head div tag, you will see a dashboard-element div tag. The concept here is to use the header as the slide control, thereby leaving the header visible and allowing the end user to notice that there might be more information. In order to achieve this, you must move the header before the element. The default code shows the header contained within the element div:

<div id="element6" class="dashboard-element chart...