Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Jquery 3
  • Overview
  • Transcript

4.1 Building an Accordion Component

The best way to learn is by building something, so in this lesson we'll apply several of the concepts you learned in this course and build a fully functional accordion component.

4.1 Building an Accordion Component

In this final lesson of the course, I thought it would be a good idea to take some of the concepts that we have talked about and apply them. So we are going to write a very simple accordion script. Now, if you're not familiar with an accordion, it just goes like this. You have what I'm going to refer to as headings. And right now, all we see are the headings, but whenever you click on one of these headings, we see description text for that heading. And whenever you click on another heading, then what was previously shown as now gone and and then we see the description for whatever heading that we click on. Now, this particular implementation is going to be flexible in that it's going to allow us to click on anything and expand any one of these items. Like, for example, there's this link that says Expand Item 2. And if I click on that, then it's going to expand Item 2. So this is what we are going to build. Let's hop on over to our code editor and build it. The HTML for the script is rather straightforward. We have a dl, which is a description list. And a description list is made up of a description title and then the description itself. So we have a dl element. It has a class of accordion. And then there is a dt and then a related dd element. Now, the dt element is our heading. And you can see that there is this custom attribute that says data-acc-id. This is short for data accordion ID. Basically, this is going to contain the selector of the description that we want to show. So we can see that this is for the id of description-1, and that is this dd element here. And any item that we want to expand upon, we just need to add this data-acc-id attribute just like I did for this link up here. So if this was going to expand item three, then we would change this id to Item three and then we would want to change the text up here as well, and then it would expand this here. So the first thing we need to do is hide all of our dd elements, because by default, they are going to be shown. So we can easily select those elements and then hide them. So we're going to call the dollar function. Our selector is going to be rather specific. So we're going to have dl, and we want that class to be accordion. And then we are going to select all of the dd elements inside of a dl element with a class of accordion and then call the hide method. So that's going to hide all of our dd elements so that we can then show them. And then we just need to write our event handler. Now, we want our event to fire on every element that has this particular attribute. So we need to use event delegation here. And we're going to call the dollar sign, pass in documents. We're going to use the on method and then we are going to listen for the click event. But we are going to filter this to only the elements that have the data-acc-id attribute. And then our function that is going to execute. Now, since any element can trigger the expansion of these description items, we need to first of all prevent the default action of that element. Like, for example, we have a link up here, and even though the href is set to a pound sign or a hash, we should still prevent that default. So we're going to use the preventDefault method to prevent that default action. Now, the main thing that we need from whatever we click on is the value of this data-acc-id attribute. So that should be the first thing that we need to get. So let's create a variable called selector, and we are going to call our jQuery function. We're going to pass in e.target, because that is going to give us a jQuery object that wraps around the element that we clicked on. Then we're going to use the attr method and we are going to retrieve that attribute. So that will give us the selector that we need so that then we can expand whatever dd element we need to. So let's do that. We're going to call the jQuery method, and we're going to pass in our selector. And to show our item, we're just going to call the slide down method. So if we save this and go back to the browser, we're going to click on these items and we are going to see them expand. However, none of the existing items that are currently shown are hiding, so that's something that we need to add as well. But let's also test this link. If we click on the link, we see that Item 3 is expanding, and let's change that back to be Item 2. So we'll change that, we'll go back. Expand Item 2. And there we have that. So as far as displaying our descriptions, everything is okay. But we need to keep track of what is shown. And one way that we can do that is by simply adding an attribute to the shown element. So whenever we show the element, we're going to add an attribute. So we're going to use the attribute method, let's just call this attribute data-active, and we're going to set that to true. Now, notice the syntax that I'm using here. One thing that we have not talked about is that most of the methods in the jQuery library return the jQuery object that we have selected. So here we are selecting our element, and then we are calling the attribute method. But this attribute method, since we aren't retrieving the value of an attribute, it is just setting the value of an attribute, it's returning this jQuery object. And this allows us to call the slideDown method immediately. That's called method chaining. It's kind of like the deferred objects that we saw in the previous lesson. So not only does the dollar sign return a jQuery object but just about every other method does as well, as long as you aren't retrieving the value of something. So this is going to add the data-active attribute to whatever element is currently being shown. So that will allow us to select that element and then we can remove that attribute. So our selector is going to select an element that is inside of a dl element with a class of accordion. We're going to be very explicit with this selector, and it's going to be a dd element that has an attribute called data-active. And then we can remove that attribute, so we will call the remove attribute method. We're going to remove data-active. And then we are going to hide that description item, so we're going to call the slideUp method. So now whenever we head back over to the browser, if we expand on Item 2 by clicking this link, we still see that our code works. But if we click on any of the other items, we see that the existing item hides and then the new item is shown. So whenever we click on anything else, we see the behavior that we have wanted. Now, it's not entirely perfect. If you click on Item 2, it's going to hide it and then it's going to show it again. Ideally, whenever we click on the heading of a currently shown description, it should just hide that description and not show it again. And we can easily do this. We just need to check to see that whatever item we're clicking on does not have that active attribute. So let's go back to our code. Let's go ahead and create another variable, I'm gonna call this $target. And we are going to go ahead and select our description element that we are going to attempt to show. Because it is this element that we need to see if it has the data-active attribute. And if it does, then we just need to hide it and not show it. So let's create a variable called active. And we're going to use $target. We're going to retrieve the value of data-active. Now, if we have a value here for data-active, that is, if it exists, then we're going to have that value. But if it doesn't exist, then it's going to be undefined. So that's how we are going to determine if we are actually going to show the description for the item that we clicked on. Let's change this to $target. Because we've already selected that element, we don't need to select it again, that is inefficient. Okay, so we always want this code to execute. Regardless of what item we click on, we want to hide it. But after we hide it, we need to then see if we had a value for active. And if we did, then we just want to return, because that means that we clicked on the heading for the currently shown item. So we're going to check if active is truthy here. And if it is, we are simply going to return, because we don't want to show it again. However, if active is false, then we are going to show whatever it is that we clicked on. So let's save this, let's go back to the browser and let's click on Item 1. That expands. Let's click on Item 1 again, and that hides. That is exactly what we want. But let's make sure by clicking on it again that we see our description. Now we should see the same behavior that we saw before whenever we click on a new item. And it looks like we do. Let's also check to make sure that the link works. It does. Now, if we click on the link again, we should see item two fold up, and we do. So with just a few lines of code, we've written a completely functional UI component, and jQuery made it possible to write it in so few lines. If this were something that we were going to write with pure JavaScript and pure DOM objects, it would take quite a bit. In fact, the animation alone would require a lot of JavaScript.

Back to the top