Ok, so this is just a simple How-To for those people who want to use Dream Portal's Animated Expand/Collapse on anything!

Ok, if you don't have a layout assigned on the action/nonaction for where you want your animated divs, you'll need to add dreamportal.js into the header or in the body...


It may be a better idea to set a variable to determine if the file_exists before applying it.  Because, lets say you uninstall Dream Portal, there will be errors if you don't check for file existence, So we can do this Something like so, instead:


Also, if we don't have any Dream Portal layout assigned to this page, we'll also need to call loadInfo in the header as well.  loadInfo is defined in dreamportal.js.  1st parameter is 0 for guest, 1 for member, URL to images directory to switch the expand/collapse images, and the members session id, if exists.

Bytheway, the above code should be placed into the Source file since you are adding headers.

Ok, now that we have that bit of stuff done, we can now begin to add the actual code into the template.  This is the FUN part, and how it all comes together.  Let's create a default template function, and place in our first bit of code for finding out if it should be expanded/collapsed (we'll call it $dp_box, but you can call it anything ofcourse):


Ok, what is this and what does it do??

We set the cookie or the $options variable to true or false, for both guests and members.

Break down of examplemodule_1:
example - This is the first part of the key, this can be anything you want.  You'll need to use it later on for your ID values.
module_ - This MUST NOT change, it always must be module_ because dreamportal.js uses this string as the middle string for this.
1 - This is the ID for this, IT MUST BE AN INTEGER VALUE, since dreamportal.js does a parseInt() on this part of the key.  This comes in handy for loops.  For example, let's say you have a loop like so:
Now you can use the value of $i and have more than 1 box, but I suppose we are getting ahead of ourselves now.  Let's take a step back and show you how to do this for only 1 box.


Ok, now back to the code itself.  Here's more code that is added to  function template_main():


First <div id=dp_examplemodule_1>
We don't want to set the class to block_header unless the box is to be expanded according to the cookie (guest) or $options (member).


Ok, so we are inputting the header of the box in here.  "Dream Portal Animation Style" is the title that should get displayed.
We call the function toggleModuleAnim() from within dreamportal.js.
1^st parameter = "example" This is what we defined the first part of the cookie/$options remember?
2^nd parameter = "1" This is the 3^rd part of the cookie/$options.
3^rd parameter = "3" This is responsible for setting the SPEED of the animation for collapsing/expanding.  The higher the speed, the faster it goes, the lower the speed, the slower it goes.
   
Than we also set the image to display by default and define the id of the image.
id="examplecollapse_1"
"example", from the 1st part of the cookie/$options.
"collapse_", this is REQUIRED and MUST be in there for it to work!
"1", this is from the 3rd part of the cookie/$options.

Ok, for the final bit of code we close off the head </h3> and <div> and place in the body <div>


The body <div id="examplemodule_1">
"example" = 1^st part of the cookie/$options
"module_" = MUST BE DEFINED exactly as this!
"1" = 3^rd part of the cookie/$options

And within the div we begin the roundframe blockframe class and input anything we want into it, input the lowerframe span after that and close the <div>.
We set a <br class="clear" /> so that if there is anything else below that box, it won't be too close to the bottom edge of the box.

THAT IS ALL THERE IS TO IT!

NOW FOR THE Complete Template function!


Ok, so this box is using examplemodule_1 to store the cookie's name or $options[] key index.  It is important for this to be a unique value, so you wouldn't want to use example again, unless you plan on changing the 1 to another number.  This stays unique, unless you actually want another box to be affected by the collapse/expand state that is set within the $_COOKIE (guest) or $options (members) variables.

Enjoy!