Jump to content


nested vertical list script

  • Please log in to reply
1 reply to this topic

#1 jcombs_31

  • Staff Alumni
  • Advanced Member
  • 2,066 posts
  • LocationFL

Posted 30 October 2006 - 05:51 PM

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...

#2 tomfmason

  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 31 October 2006 - 02:23 PM

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,

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users