Expanding Elements
This can be used to allow elements such as div's to expand and contract on the page as a nice way of showing and hiding them. Lots of people have written JavaScript to produce this effect but I always like to write my own plus I wanted to make sure it does the following.
- Make use of CSS to cut down on JavaScript code.
- Open elements faster depending on how tall they are on the page.
- Know how tall elements are on the page so you don't have to specify a height manually.
- Can be opened and closed from the same link.
First off you need to include the js file on your page. In order to make an element expandable it must be given a class name of 'Expanding' and it must have a unique id. You then need to specify if the element starts off hidden or visible, to do this you must use the style attribute 'visibility' and set it to 'hidden' or 'visible'. Lastly but not to be missed is to make sure you have the class 'Expanding' in your style sheet with overflow set to hidden. Then it is just a matter of calling the ShowHideMe function passing in the unique id of the element you wish to animate in order to show it or hide it on the page.
Click here to see an example.
So here is a div element which has expanded on this page. If an element is very tall then the speed to expand it will increase so not to bore people with a long animation running down a page!
Click here for a really tall one!
You will notice that because this is tall the speed at which it expanded was faster.
Weeeeeeee :P
Tested to work in the following browsers;
- IE 7, 6
- FireFox 2.0.0.3
- Opera 9.02
Notes: IE 7, a little CSS underscore hack is required for internet explorer 7 as the elements have the bottoms chopped off of them when fully expanded. See the styling in the HTML file of the downloadable source.