When Microsoft first released its AJAX framework codename Atlas, at the time, they also released a collection of community created controls called the AJAX Control Toolkit. This toolkit has become quite popular and highly useful, however, I found that one of the most popular controls that I was using was the collapsible panel extender. This gave the user an easy way to create a simple collapsing effect within their website. This is nice but I found I wanted to implement this effect on sites that I was not using any of the other AJAX features. So I set out to create my own library that I could import that mocked the basic functionality of the collapsible panel extender but did not have the overhead of implementing the full Microsoft AJAX framework. This is what I came up with.
The principle is simple you have a simple html div tag that has content inside that you would like to hide or show with a collapsing effect on a given action. The easiest way to implement this is to make the function call on a click event. The way I prefer to implement this is to use two divs stacked on on top of the other. Using the top one as the header and trigger and the bottom as the content. Here is an example of how I set it up.
1: <div id="divHeader" style="cursor: pointer;" onclick="toggleDiv('divContent', 'img1')">
2: <img id="img1" alt="Exapnad" src="expand.gif" /> Header
3: </div>
4: <div id="divContent" style="overflow:hidden; display:none;">
5: Content<br />Content<br />Content<br />Content<br />
6: </div>
There is one thing in this piece of html code that I haven't explained. The image in the Header is used to display an altering graphic depending on the state of the content div. Now that If you do not want to implement it just omit it from the method call. Now it is time to import that .js file and configure the setting. Here is the configuration section of the .js file that you will need to change.
1: //Configuration section
2: //********************************************************
3: var ExpandImageSrc = 'expand.gif'; //image location to display when Div is collapsed
4: var CollapseImageSrc = 'collapse.gif'; //image location to display when Div is Expanded
5: var speed = 15; //how often the div refreshes to the new height
6: var incriment = 5; //each time the div refreshes height will be increased or deceased by this amount
7: //********************************************************
ExpandImageSrc & CollapseImageSrc are the locations of the images that will be alternating. Speed is how often the animation will refresh and increment is the amount the height of the div will change. By changing these two variables you have control over the look and feel of collapsing animation. Hopefully this will help those of you looking for a simple way to implement collapsible panel animation.
Download the .js file here
