jQuery for Complete Beginners: Part 3
Jack Franklin
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.
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
gopi
Posted 62 days ago 16hi,i want a code to validate a text box using jquery,,anyone pls send me the code …
niaz
Posted 69 days ago 15this is very nice site, i have learned a lot about mobile website, wordpress plug in jquery . thank you very much
dermazen
Posted 123 days ago 14is a dermazen ozon h2 o and h3 o system optimizasyon
prefabrik ev fiyatları
Posted 136 days ago 13forget to close some tags in first code
prefabrik ev fiyatları
Posted 142 days ago 12we’ve learned into practice (as well as meeting new things) and create a basic accordion.
sunny
Posted 145 days ago 11Hi,
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.
Forgiven@26
Posted 282 days ago 10this 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:
Daniel
Posted 314 days ago 9Hi, 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
NK
Posted 656 days ago 8thanks for sharing nice jquery thoughts….
Web Risorsa
Posted 656 days ago 7Nice explanation… Looking for more of the same…
.-= Web Risorsa´s last blog ..SEO Best Practices – Video Cast =-.
Nikola Dadić
Posted 658 days ago 6i think you forget to close some tags in first code
obozdag
Posted 658 days ago 5Easy to understand, useful, short article. Thanks.
Negoita Cosmin
Posted 659 days ago 4Nice article. It’s really simple! Thank you!
.-= Negoita Cosmin´s last blog ..cssfactory: Here’s a pic of the HTML version of the site. This is how it is going to look when it’s launched: http://wimg.co.uk/f65.png =-.
Aisha
Posted 659 days ago 3Beautiful Site, I really like it.
.-= Aisha´s last blog ..30+ Incredible & Wonderful Sand Sculptures =-.
Cook
Posted 659 days ago 2a very well written article….
.-= Cook´s last blog ..30 Exceptional Examples of Famous Celebrity Websites =-.
Keiron Lowe
Posted 659 days ago 1Fantastic, been waiting a while for the next bit of this series. Your really good at describing what the code does and such. Cheers