expand_collapse_different_directions

jQuery experiments: Expand/Collapse in different directions

the script

These jQuery examples were inspired by Karl Swedberg's article - Slide Elements in Different Directions. Here, the concept has been implemented slightly differently.

With JavaScript disabled, the links "Collapse"/"Expand" are needless and could confuse the user. That's why, to separate the behaviour from the content, the elements that trigger the animation are generated by the jQuery script.

• 1.

  Expand up

  Slide from the bottom up or from the top down

• 2.

  Collapse down

  Slide/Fade from the bottom up or from the top down

• 3.

  Collapse left

  Animate the width

• 4.

  Collapse left

  Animate the width and the opacity

• 5.

  Expand right

  Animate left margin

• 6.

  Collapse right

  Animate left margin

• 7.

  Collapse left

  Animate the left CSS property

• 8.

  Collapse right

  Animate the left CSS property

• 9.

  Collapse

  Animate the width CSS property

  Wav!

• 10.

  Collapse

  Animate left and bottom CSS properties

---