FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Create an Accordion Control

To demonstrate jQuery's power, we're going to write an accordion script. It may seem like a simple idea, but it would take a lot of code without jQuery.

3.3 Create an Accordion Control

In the previous lesson you got a look at jQuery and the API that it gives us. Now if you remember, API stands for application programming interface. It's basically the objects and stuff that we use to write our applications and websites. But we didn't really do anything useful. So in this lesson we're going to do something halfway useful. We're going to write a simple accordion script. Now if you're not familiar with an accordion, it is a UI component that is primarily used to display a list of things, and usually the list is only showing what I'm going to refer to as titles. There are titles and then there are descriptions or there's content associated with those titles. Whenever you click on one of the titles then the content for that title is displayed. Whenever you click on another title, then the content that was displayed is hidden. And then the content for the title that you clicked on displays, just like we saw here. Whenever I click on Item 1, then we see that the description for Item 3 goes away, and we now see the description for Item 1. So this is the type of script that we are going to write. And we're going to start with our markup. Now you can implement an accordion in a variety of different ways. You can use ul elements which makes sense because that's essentially what we have. We have a list of things, and you'll find some implementations that use an unordered list. You can also use div elements. And you will find plenty of implementations that use nothing but div elements as well. But in our case, we are going to use an element called dl that stands for description list. Which is kind of what we are doing. A description list is just a list of items and those items have descriptions. So the item is an element dt. It stands for description term. And in this case it would be Item 1. And then we have the description for our item. Which is the dd element. And this is the description for Item 1. And that's really all that there is to it. We just have many pairs within a dl element. So we can copy this and we can paste it a couple of times. We can change the items to 2 and 3. And then the descriptions for those and we are done. Except though, we need some way to denote that this particular dl element is an accordion. So we can add a class of accordion, and that will be fine. As far as styling is concerned, we could style this however we want, but I'm going to do something simple. And I'm just going to set it so that whenever we hover our mouse over the items, then we see the pointer as opposed to the itext selector, I don't know what that's called. The i bar. So let's say that's dl.accordion. We're being very specific here because we could have other accordions within our web page. And in this case we only want the accordions that are dl elements. We want to select the dt elements, and then we will set cursor to pointer and that will give us a pointer for our dt elements. So now the only thing we need to do is write our JavaScript code. So let's add a script element, and by the way, normally we would put our style and our script in external files, but in order to keep everything together so that we can see the relationship between the HTML and the JavaScript, we're just going to keep everything in one file. Okay, so the first thing we need to do is hide our descriptions because by default we don't want to see them. Now we could do that with CSS, and that's probably where we would want to do that to begin with, but since we are focusing on jQuery in this lesson let's do that with jQuery. So the first thing we want to do is select our dd elements and hide them. So our CSS selector is going to be dl and then our class of accordion, and then dd. That's going to give us all of the dd elements inside of a dl element with the class of accordion. And then we are going to call a method called hide. jQuery makes it easy to do a lot of things. Some of those is to hide, other is to show, and here in a few moments we're going to see that it makes it very easy to add animation as well. So if we save this, if we go to the browser and refresh, then our descriptions are gone. But, of course, if you click on these items nothing happens. That's because we don't have any code that's listening for the click event. Now an event is something that occurs within a web page and it's usually caused by the user doing something. So, if they click on anything in the document, they are actually causing a click event to occur. And the really cool thing about events is that we can listen for these events to occur. And whenever they do occur, we can execute our own code so that we can essentially control what happens whenever the user clicks on something. So whenever the user clicks on a dt element, we want to show the description associated with that dt element. So the first thing we want to do is select all of our dt elements because we are going to set up an event listener for those elements. So our CSS selector is going to look somewhat similar to what we wrote before except that we are selecting the dt elements instead of the dd elements. And then we are going to call a method called on and we need to pass this method two things. The first is the name of the event that we want to listen for, the second is the function that we want to execute whenever the user clicks on our dt elements. So the first thing we need to do is actually get the dd element associated with the dt element that was just clicked. Well, the first thing we need is this dt element because that will give us the ability to get its sibling, which is what the dd element is. So first we need our dt element, and we get that very simply with a very special keyword called this. Now this is a rather deep topic, but let's keep things simple. The this keyword or the this object refers to quite literally this object. So within the context of this code that we have written, the this keyword refers to the dt element that we clicked on. But this is the raw HTML element object. This is the type of object that we worked with a few lessons ago inside of DOM HTML. So it doesn't have all of the goodies that jQuery gives us. However, we can call the dollar sign function, and we can pass in the this keyword and this will give us a jQuery object that is wrapping around our dt element. So now we can use any jQuery method that we want to. So if we wanted to hide that dt element, we could just call the hide method and that will hide the dt element. That, of course, isn't what we want to do, so let's actually do what we want to do. We want to get the dd element associated with this dt element. So we do that with a method called next. We're moving to the next element within this dl element. So, we are moving to a sibling. So, by saying next we now have that dd element, and now we want to show it. So we could call the show method and that would just show the description, but we want some animation. Because a little bit of animation is a very good thing. So in this case, jQuery makes it easy to give us animation. It's simply called slideDown. And if we save that, if we go back to the browser and refresh, now we can click on our items and we see the description for those items. But notice that it's not closing the previous description, it's just simply showing the description of whatever we click on. So we need some way of keeping track of what item is currently open so that we can close it and then open up whatever description that we have clicked on. Now one way that we can do that is with attributes. We could add a custom attribute to our dt elements. Let's say data-active, and we could set that to true. And if data-active is true, then we know that that item is active. That way we can select it through jQuery and then close its description. And that's actually pretty easy to do. Now the reason why we have data- instead of just plain active is because whenever you use a custom attribute within your HTML, it is recommended and in order to meet HTML 5 specifications, it has to begin with data- and then whatever attribute name that you want to use. That's just the correct way of doing that. So whenever we are opening up a description we want to set this data-active attribute on the dt element that we click on. So we need to add in before we move to the next element the dd element. Let's go ahead and add a comment here, dd element. Before we move on to the next element we want to add an attribute to this object, so we do that with the jQuery method simply called attr. It is short for attribute. And we can use it to either set an attribute or we can use it to get the value of an attribute. If we just say attributes, and then pass in an attribute name, that's going to give us the value of that attribute. But in this case we want to set it. So we are going to simply set it to true. And if we save this, go back to the browser and refresh, let's inspect our items here. So we're going to look at Item number 1. Let's drill down. There it is. We see these data- brackets, -id, this was injected with brackets. So you can see that brackets is using the data attributes. And for some reason active is true there. Let's take that out so that we don't have that to begin with. So let's refresh. And now we see that our data-active attribute is not there. If we click on the Item 1, then we are going to see that data-active is now there. If we click on Item 2 we're going to see that data-active is there as well. The same thing with Item 3. So that code is working. Now we need to retrieve whatever element has the data-active attribute so that we can remove that attribute, and we can also close the description for that dt element. So before we open up the description, we want to close the existing one. So we're going to use a CSS selector to find the dt element that has data-active. So once again, we're going to start with dl and then the class accordion. We want to select dt elements and then we are going to use the attribute selector. And it looks like this. We have an opening square brackets. Then we have the name of the attributes. So in this case that is data-active. And then a closing square bracket. Now in this case this is looking for any dt element that has an attribute of data-active. If we wanted to actually search for those that have a value of true, then we can say equals, and then a single quote, true, and then another single quote. But in our case we don't really need to test for the value, we just want to select the dt element that has a data-active attribute because we are going to remove that attribute. So the next method that we call is simply called remove attribute. We pass in the attribute that we want to remove, data-active, and then we can move on to the next element, the next dd element. So will call next. And then just as we have a slideDown method, we have a slideUp method. So let's go over this logic again, and then we will actually see if this works. So whenever we click on a dt element, we are going to find any dt element inside of an accordion that has an attribute of data-active. We are going to remove that attribute from that element. We are going to move to the next dd element or rather just the next element, which is a dd element, and then we are going to slideUp that dd element. After that's done, then we get the dt element that we just clicked on, we add the data-active attribute, we go to the dd element that is next, and then we slideDown. So let's save. Let's go back to the browser, refresh. And whenever we click on any of these items, we see that the previous one closes, the new one opens up, and everything works just as it should. Now let's go back to our code. We did in, let's see, that is 12 lines of code, what would take a lot more if we were writing just pure JavaScript with pure DOM objects. Just the animation alone would require a lot of extra code but jQuery just makes it easier to do. And that's one of the great things about jQuery. With just a little bit of knowledge of JavaScript, you can do some pretty awesome things because jQuery makes the complex simple.

Back to the top