nested vertical list script

[jcombs_31]

I want a smooth transition when I click a link a sub menu will appear smoothly below it and push the other menu items down.  Any good script someone can point me to

ex:
[code]
list item 1
list item 2
list item 3
    sub content 1
    sub content 2
list item 4
list item 5
[/code]   

when list item 3 is clicked, the sub content appears in a nice smooth transition...

[tomfmason]

Ok I have been thinking about this and came up with two ways that may help.

One would be to use opacity to have the sub content fade in or out. Which I don't think that was really what you were asking about.

Now the second one that I thought of was to have a recursive function that would increase the size of the div until it has reached the max height.

Here is an untested example. You will most defiantly want to test and debug it.

[code]
var maxHeight = 100;//or whatever your end height will be
var offSet = 10;//or however many pixels you want to add
var speed = 100;

function doShow(id) {
    var div = document.getElementById(id).style;
    var current = div.height;
    if (current !== maxHeight) {
       for(i = current; i < maxHeight; i++) {
           var newHeight = i + offSet;
           div.height = newHeight + 'px';
           setTimeout('doShow(' + id +');', speed);
       }
   }
}[/code]

As I said this is untested but I think that you should get the idea. This function will increase the height by 10 pixels every 10th of a second. Which should give it the appearance of smooth transition.

Also you will have to place the height within the div itself for this to work..

Hope this helps,
Tom