Animated Collapsible DIV v2.4

[gjhunter]

1) Script Title: Help with Animated Collapsible DIV v2.4 - Making it horizontal

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: Hi,

I am new to this forum, so pardon me if I ask a somewhat silly question. But I have been on a new project and searching an "animated collapsible" div similar to the one on this page: http://www.yootheme.com/icons/downloads

When you click the image the WHOLE PAGE and other image/content below slides down and reveals the info.

I saw the animated div script and was wondering a few things:

DD SCRIPT: Animated Collapsible DIV v2.4

1. I managed to get the script active on my page, but I wanted to know how to get multiple images to use like that website link above?

2. How does the script move THE ENTIRE page down. How does this actually happen? If I use the script on my page how will ALL THE OTHER content move down?

I guess those are the two question I will start with. If anyone has the answer, I would greatly appreciate the help.

Thanks - G.J.

[ddadmin]

Hi:
To answer your questions:

1) If I understood you correctly, you would simply define a separate collapsible DIV for each image thumbnail. Make sure all the collapsible DIVs are defined as a single group, so the expanding/collapsing of one DIV closes its peers (if open) at the same time.

2) If you're asking how as in the mechanics, it does this by expanding the height of the DIV in question, forcing the page to reflow to accommodate the DIV's added presence. Animated Collapsible DIV script does this as well.

[gjhunter]

Okay thanks. Can you help me to add one and then I can repeat the process for other divs? I just need to know how to change the first one, then add another.

I believe I can repeat the process for more if needed. I would greatly appreciate the help. And thank you very much for your response :-)

[gjhunter]

How can you use an image with text inside. Like a image from Photoshop, etc? I've tried to use an image instead of the <div> box but haven't been able to make it work.

[gjhunter]

Hi:
To answer your questions:

1) If I understood you correctly, you would simply define a separate collapsible DIV for each image thumbnail. Make sure all the collapsible DIVs are defined as a single group, so the expanding/collapsing of one DIV closes its peers (if open) at the same time.

2) If you're asking how as in the mechanics, it does this by expanding the height of the DIV in question, forcing the page to reflow to accommodate the DIV's added presence. Animated Collapsible DIV script does this as well.


Hi Sir,

Well I got the image insert to work and figured out the collapsing call. I have another question if you don't mind? I am trying to display the divs or boxes horizontally. This script only allows for vertical movement. Do you know how to set it up in ROWS - Something I am seeking is 3 x 3 x 3.

So 3 rows of 3 all in the same div.. so that they all move in coordination with each other?

[ddadmin]

If you mean animate the contents in a horizontal manner, you can try finding the below line inside the .js file:


var animateSetting={height: action}

and replace "height" with "width". The end result may not be as well polished as the default effect, however, as the script wasn't designed to animate horizontally, such as in a Horizontal Accordion script (http://www.dynamicdrive.com/dynamicindex17/haccordion.htm).

[gjhunter]

Hey, I tried that but it threw the div all out crazy. It didn't seem to work. I don't know what else to try?? :-)