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!
  // Do something!

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() {

In our example, the link was literally a link.


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) {

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


  1. User Avatar
    Aaron Hill
    Permalink to comment#

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

  2. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

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

    • User Avatar
      Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Permalink to comment#

    Amazing tutorials. You should write a book.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.