Benjamin Lu

everyday is cool

A First jQuery Click Handler

jQuery 1.0 was released in August 2006. One way to understand its appeal is to look at a small interaction. A link or button can find an element on the page and change its visibility without each page having to write the same setup code.

Here is a recreation using a current local copy of jQuery. Put a button with ID details-toggle before a paragraph with ID details. Set the button’s aria-expanded to true. Load jQuery before the following script and place both scripts after the markup:

$("#details-toggle").on("click", function () {
  var details = $("#details");
  details.toggle();
  $(this).attr("aria-expanded", details.is(":visible") ? "true" : "false");
});

Tab to the button and press Enter twice. The paragraph should hide and reappear. The example uses the modern .on() API. The historical idea is the combination of selecting elements and attaching behavior to them.

jQuery 1.0 release announcement