toggle and toggleClass demo

div1 starts in next line

This is h4 element is in div1

First paragraph

Second paragraph

Third paragraph

Fourth paragraph and last element in div1

This is div2

OuterUl first item
OuterUl second item
- midUl first item
- midUl second item
  - innerUl first item
  - innerUl second item
OuterUl third item

The first set of buttons operate on div1, showing that $('someSelector *') is equivalent to #('someSelector').children()
when there is only ONE level to go down.


The next set of buttons may have some surprises for multiple levels !
Click the left button and see what happens; then click it again.
Now reload the page and repeat that with the right button.
Finally, reload the page and click one button, followed by the other.


You may wish to try the same thing on outerUl


The next set of buttons operate on div2 and its InnerUl.
Notice how parents() includes the body and html tags and therefore all their subtrees.