As we've talked about, jQuery can be thought of as a "select and do" library. We've talked about selecting quite a bit, so now let's talk about some doings. Remember that pattern basically looks like this:

// Select something!
$(".something")
  // Do something!
  .hide();

Rather than working with more theoretical examples, we move right into something real-world-y. We found this Pen by Drew Barontini and forked it.

See the Pen Credit Card Form by Chris Coyier (@chriscoyier) on CodePen

In our example, we hid the credit card form by default. Then we created a link that you could click to slide up and slide down the credit card form. We select the link, then do a slideToggle on the form. Select and do!

We haven't talked much about events yet, but that's a huge part of jQuery. An event is something like a mouse clicks, key presses, scrolls, etc. The "do" part of "select and do" often happens after an event. Don't worry, we'll talk a lot about events before this series is through. For now, just know that on() is the best/standard way to bind events in jQuery. Bind, meaning "watch for this event on this element or set of elements."

The basic plan:

$("#link-that-toggles").on("click", function() {
  $("#thing-to-toggle").slideToggle();
});

In our example, the link was literally a link.

toggle

The way that hash links work by default in any browser is that the window will scroll down to the element with the ID that matches that hash link. Sometimes that's good. I like how it creates a semantic connection between that link and that element. So without any JavaScript, the link still essentially makes sense (especially if you title it something smart).

But sometimes, that hash link jumping behavior is a bummer. We can prevent it in JavaScript using preventDefault. Like this:

$("#link-that-toggles").on("click", function(event) {
  $("#thing-to-toggle").slideToggle();
  event.preventDefault();
});

We'll talk more about that coming up.

Of course, jQuery's own documentation is a fantastic resource for all the "do" aspects of jQuery (methods).

I think the very basic understand of this "select and do" and events really opens up a world of understanding in JavaScript. I know it did for me. At the end of this screencast we take a peak at the current design of CSS-Tricks and see where JavaScript is clearly used to react to some click events and change the UI. Very very similar stuff to what we were doing in the previous demo. For example, setting an active class on things that you click, like this:

See the Pen d6f7161a5931397b4f24195a315d52f3 by Chris Coyier (@chriscoyier) on CodePen

Comments

  1. Aaron Hill
    Permalink to comment#

    Wow! I want to learn all of this! :)

  2. mario sanchez
    Permalink to comment#

    The slideToogle, has this animation from top to bottom as a default, is there any chance to change this default sliding. I ‘ve been trying but not sure how to achive from bottom to top animation. Any sugestions…. thanks!

  3. Gregor
    Permalink to comment#

    For those like me wondering how Chris creates the nav items so quickly:

    type nav in the html window and then press shift + tab.

  4. Gregor
    Permalink to comment#

    Nevermind my previous comment… It’s just nav + tab :/

    • someka
      Permalink to comment#

      it doesnt work as i expect :/
      i press nav + tab and it just makes:

    • Chris Coyier
      Permalink to comment#

      What’s going on there is Emmet. It’s in CodePen, and it’s available in tons of different code editors (see their site).

  5. rakshit2207
    Permalink to comment#

    Amazing tutorials. You should write a book.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.