jQuery for Complete Beginners: Part 3

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.

Jack Franklin

Jack Franklin is a 17 year old budding web designer & developer living in Cornwall, England who enjoys messing with HTML, CSS, PHP & Javascript. Away from the desk, Jack enjoys badminton, football & snooker.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. niaz says

    this is very nice site, i have learned a lot about mobile website, wordpress plug in jquery . thank you very much

  2. sunny says

    Hi,

    how can I stop the already selected heading to again start the process of slideup and slidedown as
    I tried this

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

    })

    but it didnt worked.

  3. says

    this is a great tutorial, I am a beginner and this is helping me get to understand jQuery very well. If anyone wanted to add the code to an external js here is how you do it:

    $(document).ready(
    function()
    {
    var headings = $(‘h3′),
    paras = $(‘p’);
    paras.hide().eq(0).show();

    headings.click(
    function()
    {

    // save the element that has been clicked for easy referal
    var cur = $(this);

    ////////// This section hides and shows with no animation ////////////////////
    // hide all the paragraphs
    /*cur.siblings(‘p’).hide();

    // get the next paragraph after the clicked header and show it
    cur.next(‘p’).show();*/
    ////////// This section hides and shows with no animation ////////////////////

    ////////// This section hides and shows with animation ////////////////////
    // hide all the paragraphs
    cur.siblings(‘p’).slideUp();

    // get the next paragraph after the clicked header and show it
    cur.next(‘p’).slideDown();
    ////////// This section hides and shows with animation ////////////////////
    });
    });

    just make sure that you link your html to your external js like this:

  4. Daniel says

    Hi, thanks for the jQuery Tutorial – I’m currently getting into it as total Newbie in Java Script and your Tutorial helped me to get some first insights. Thanks, Daniel

  5. Keiron Lowe says

    Fantastic, been waiting a while for the next bit of this series. Your really good at describing what the code does and such. Cheers