jQuery for Complete Beginners: Part 3

Advertisment

Welcome to the third post in this series, taking you from jQuery novice to jQuery expert. The past two weeks have essentially just listed functions that you will need to know. Today we are going to put the skills we’ve learned into practice (as well as meeting new things) and create a basic accordion.

An accordion is a very good way of showing lots of content in a small area. You might have five headers, each with a paragraph below it. Showing all that at once is going to go down for a long way. With the accordion, only one paragraph is shown at a time, and users can click on the headers to view the content they wish. First we will build a simple one and then we will animate it. You’ll see just how many built-in functions jQuery includes that makes our lives much easier. You can see the online demo here.

Firstly I set up the accordion itself:

<h3>Item 1
    <p>Item 1 content</p>
    <h3>Item 2
    <p>Item 2 content</p>
    <h3>Item 3
    <p>Item 3 content</p>
    <h3>Item 4</h3>
    <p>Item 4 content</p>

And then just some very basic CSS to make it look a bit clearer:

 p,h3 {margin: 0; padding: 0;}
        p {height: 150px; width: 200px; border: 1px solid black;}
        h3 {height: 50px; width: 200px; background-color: blue; color: white; border: 1px solid black;}

This leaves us with something similar to this. I’ve only taken a picture of the first two items to save space, and besides, the next two are identical.

Now we can get onto the JavaScript. Include jQuery from the google CDN, add your script tags to the bottom of your page and away we go:

var headings = $('h3'),
            paras = $('p');

All I am doing here is selecting all the heading 3 elements and all the paragraphs, and saving them to two arrays. Note the syntax, I could have done this:

var headings = $('h3');
var paras = $('p');

However I find it quicker to just put a comma between them and emit one of the ‘var’s. It’s also more commonly done that way.

Once we’ve done that we now need to hide all but the first paragraph. This is done like so, using a function eq():

paras.hide().eq(0).show();

First I hide all the paragraphs and then use eq(0) to select the ‘0th’ element of the ‘paras’ array. In JavaScript (and most languages) arrays start from 0, so 0 will select the first element. Using eq(1) would select the second element. I then use jQuery’s show() function show the first one. This leave us with something like this:

And now we can write the code for hiding and showing. Firstly, we need to add a click event to our headers:

 headings.click(function() {

 });

And we can write the code to go in it:

 var cur = $(this); //save the element that has been clicked for easy referal
 cur.siblings('p').hide(); //hide all the paragraphs
 cur.next('p').show(); //get the next paragraph after the clicked header and show it

Lets go through this line by line:

var cur = $(this);

Here we take the value of ‘this’ and wrap it in the jQuery object before saving it to a variable ‘cur’. ‘this’ refers to the current element being interacted with. In this case, it’s the heading element that has been clicked.

cur.siblings('p').hide();

The jQuery siblings() function finds all elements on the same level as the current element. Here we find all the siblings of the current element that are paragraphs and hide them. So now we know that there are no paragraphs being shown.

cur.next('p').show();

Finally we use jQuery’s next() function. This finds the next element from the one we have selected. In this case it finds the next paragraph and shows it.

And we’re done! If you try that in your browser, it works fine. However, seeing as jQuery gives us loads of animation functions, lets put a couple of those to use.

The two functions we will use are slideUp() and slideDown(). These do exactly what you would imagine, they animate an element sliding up until it’s gone, and then sliding it back down. In our click function that we wrote:

 headings.click(function() {
            var cur = $(this); //save the element that has been clicked for easy referal
            cur.siblings('p').hide(); //hide all the paragraphs
            cur.next('p').show(); //get the next paragraph after the clicked header and show it
        })

Replace the hide() function with slideUp() and the show() function with slideDown():

 headings.click(function() {
            var cur = $(this); //save the element that has been clicked for easy referal
            cur.siblings('p').slideUp(); //hide all the paragraphs
            cur.next('p').slideDown(); //get the next paragraph after the clicked header and show it
        })

And try now. Is it not beautiful?

That just about sums it up for this week. We’ve taken things discussed in the previous two weeks and put them together. We’ve also met another couple of functions to add to your jQuery repertoire.