How jQuery Works

HOW IT WORKS

The key to the behavior you experienced is the script you added in step 4.

This script carries out two things.

1. First, it extends each <h1> element with a <span> tag that holds the plus or minus sign indicating the collapsed or expanded state of the heading.
2. Second, it describes the function that responds to the click events.

The script is very concise due to jQuery. The first <script> element you added in step 4 loads jQuery. The second script contains the magic.

Let’s see how it works line by line.