Collapsive text is a great module for text collpasible.
But I saw in Stanford web page that they are using an animated collapse.
Drupal's friends,
How can I use animated collapse in Drupal? Is there any tutorial?
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Thanks
EPR

CommentFileSizeAuthor
collapse1.jpg178.93 KBelio.pajares
collapse0.jpg62.85 KBelio.pajares

Comments

joe.bearden’s picture

joe.bearden commented

Agreed. I'd love to see a way to apply this particular snippet in my Drupal site.

joe.bearden’s picture

joe.bearden commented
Status: Active » Needs review

Ok, found a way to do it. :)

It's probably not clean at all as I'm not really a programmer, but it works on my site. If someone who actually knows what they're doing would like to help and clean it all up, I think we'd all appreciate it. But here's a start:

Step 1:
To your theme's .info file, add the line:
scripts[] = animatedcollapse.js

Copy the file from the website as listed and copy it into that theme's folder.

Step 2:
To the top of an unfiltered page, add the line:

Copy the file from the website as listed and copy it into your theme's folder.

Step 3:
Paste the remainder of the header into the page:

animatedcollapse.addDiv('jason', 'fade=1,height=80px') animatedcollapse.addDiv('kelly', 'fade=1,height=100px') animatedcollapse.addDiv('michael', 'fade=1,height=120px') animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets') animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1') animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1') animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted //$: Access to jQuery //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID //state: "block" or "none", depending on state } animatedcollapse.init()

Step 4:
Paste the example code into the page:
Show Examples 1, 2, 3 | Hide Examples 1, 2, 3

Example 1 (individual):

Only local images are allowed. Slide Down || Slide Up

Content inside DIV!
Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.

Example 2 (individual):

Only local images are allowed. Slide Down || Slide Up

Content inside DIV!
Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.

Example 3 (individual):

Only local images are allowed. Slide Down || Slide Up

Content inside DIV!
Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.

Example 4 (part of group "pets"):

Only local images are allowed. Slide Down || Slide Up

The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.

Example 5 (part of group "pets"):

Only local images are allowed. Slide Down || Slide Up

The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.

Example 6 (part of group "pets"):

Only local images are allowed. Slide Down || Slide Up

Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.

This should work if I didn't miss any steps. It worked for me. Now I'm off to make it work for my site!

Edit: Unfortunately, I can't set this to plain text. Drupal.org is parsing everything. I'm not going to go through and edit everything by replacing codes for symbols to get it to display right. Sorry. :(

pukku’s picture

pukku commented
Status: Needs review » Closed (works as designed)

The purpose of this module is to make the drupal provided collapsing behaviour available as an input filter. The animatedcollapse stuff you've linked to requires a third-party javascript library, and is not the same as the drupal collapsing.

I'd rather not complicate the module by adding external dependencies, and having to add configuration screens, etc.

Ricky