Jump to content


This topic is now archived and is closed to further replies.


nested vertical list script

Recommended Posts

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

list item 1
list item 2
list item 3
    sub content 1
    sub content 2
list item 4
list item 5

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

Share this post

Link to post
Share on other sites
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.

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

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,

Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.