Animated Folding

Shows how nested lists can be folded with animation. JavaScript source code is on page bottom.

item 1
- item 1.1
- item 1.2
- item 1.3
- item 1.4
- item 1.5
item 2
item 3
- item 3.1
  - item 3.1.1
  - item 3.1.2
  - item 3.1.3
  - item 3.1.4
  - item 3.1.5
  - item 3.1.6
- item 3.2
- item 3.3
  - item 3.3.1
  - item 3.3.2
  - item 3.3.3
    - item 3.3.3.1
    - item 3.3.3.2
    - item 3.3.3.3
    - item 3.3.3.4
    - item 3.3.3.5
    - item 3.3.3.6
    - item 3.3.3.7
- item 3.4
item 4
- item 4.1
- item 4.2
- item 4.3
- item 4.4

Fully expanded it looks like (click to expand):

item 1
- item 1.1
- item 1.2
- item 1.3
- item 1.4
- item 1.5
item 2
item 3
- item 3.1
  - item 3.1.1
  - item 3.1.2
  - item 3.1.3
  - item 3.1.4
  - item 3.1.5
  - item 3.1.6
- item 3.2
- item 3.3
  - item 3.3.1
  - item 3.3.2
  - item 3.3.3
    - item 3.3.3.1
    - item 3.3.3.2
    - item 3.3.3.3
    - item 3.3.3.4
    - item 3.3.3.5
    - item 3.3.3.6
    - item 3.3.3.7
- item 3.4
item 4
- item 4.1
- item 4.2
- item 4.3
- item 4.4

Test:

Expand "item 3" - must be animated
Expand "item 3.3"
Expand "item 3.3.3"
Collapse "item 3"
Expand "item 3" - tree below should still be fully open
Collapse "item 3.3.3"
Collapse "item 3"
Expand "item 3" - "item 3.3.3" should be collapsed

Click here to view JavaScript source.

ɔ⃝ Fritz Ritzberger, 2017-06-20