2.2 Write an Accordion Plugin

A jQuery plugin is a method that we would call on a jQuery object. So you could say that it is an instance method whenever you create a jQuery object by selecting elements, or creating content, then you would call a method on that object. For example, in index.html, I added some markup. It's a div element with an idea of accordion. And then inside of this div element, we have various h3 elements, followed by div elements. And so, what we are going to do is write a plugin that's going to turn this div element into an accordion. Where whenever we click on the h three element, it's going to hide and show the corresponding div elements. So this div element essentially belongs to this H3, this div belongs to this H3, and so on and so forth. So the code that we write would look like this. We would select this elements using the ID selector of accordion, and then we would call our plugin method, and I'm just going to call it accordion because that is what it is. And then this would create the accordion using this markup. It's going to add the necessary CSS, so, that everything looks like it should, and it's also going to add the functionality. So, let's start by adding our CSS. And we're going to do so, by, first of all, adding bootstrap to our project. So, let's hop on over to our command prompt, and let's type bower install bootstrap, and we want to save this to our project. So we're going to use the save flag. This is going to go out and download bower and put it inside of our project, just like it did with jQuery. If we look at the bower_components folder, we now have bootstrap. And inside of there is distribution, then CSS, and then we have several CSS files to choose from. In our case, we're going to use the minified version. So let's add a link. And the rel is going to be stylesheet, and then href is going to be bower_components/bootstrap/dist/css/boots- trap.min.css. And that's going to give us bootstrap. Now, we do need to add some styling for the actual accordion, and I'm going to do that with just a style element. Yes, we should be putting this inside of an external stylesheet, but for the sake of simplicity, we're just going to do that here. We're going to start with the idea of accordion. And we're going to set a background color that is not white. But we also don't want it to be very outlandish. So we're going to go with a light gray color, all e's. Let's also give it some padding, and five pixels ought to be fine. But now we also want to style the individual parts of the accordion. We have the header which is the H3 elements, and then we have the panels, which are the div elements. So, let's create some classes for that. We'll say accordion, and then the class for the header is going to be accordion-header. And let's set a font size of 18 pixels. We don't want something very big, even though it is an H3 element. I think an H3 element is actually 24 pixels according to bootstrap, but 18 ought to be fine. Let's also set the cursor to the pointer, because as the user is hovering over these headers, we want them to know that they can click on these, and that's what the pointer does. Let's give these a different background color. But once again, we don't want anything outlandish, and I want to go with a darker gray color. And let's also set the color to white. And let's give this some padding of 5 pixels. And then finally, let's change the top and bottom margins, because these are H3 elements, they do have some extra margin, this way we have a tighter header, if you will. So you will have the top and bottom margins set to one pixel, and then we want to style the panels, the div elements, and we will call that class accordion-panel. And in this case let's just add just a little bit of padding, three pixels ought to be fine. And that's it. Now, we're not going to physically add these classes to these elements in the HTML. We are going to rely upon our jQuery plugin to do that. So let's go ahead and let's start writing that. Let's add a new file to our project. Let's call it accordion.js. And let's go ahead and add a reference to it in the HTML, just so that we don't forget to do that later because if anybody will, I will. So, we'll set the source to accordion.js, and then we will spend most of our time in accordian js. Now, if you don't have your server running, go ahead and get it started. See that in PM run dev. Annd we shouldn't see any changes, other than the HTML In the page, and that is indeed what we have here. So the first thing we're going to do in this file is create an immediately invoked function, because just like in the previous lesson, we want to preserve what the dollar sign means. So our function is going to have a parameter of a dollar sign, and we are going to pass jQuery as the argument. Now, as I mentioned earlier, a jQuery plugin is an instance method that we call a jQuery object. So, because this is JavaScript's, instance methods are typically on the prototype. And if we were doing this with just pure unadulterated JavaScript, that's what this would look like. We would have $.prototype, and then accordian. However, jQuery has an alias for a prototype, It's simply called fn. So we have $.fn, and then our plugin name, accordion, in this case. And we set that to our function, and we now have a jQuery plugin. Now, it's not going to do anything, but we have the beginnings of that. And inside of this function is of course where we are going to do all of the stuff necessary for setting up our plugin. So, in this case, we want to add those CSS classes to the H3 and dev elements. We also want to set up a click event listener. So that's whenever we click on the H3 elements, they do the work that they are supposed to do. So let's start by adding the CSS classes. Now, this is an instance method for our jQuery objects. So this refers to the jQuery object that we are working with. So we don't have to use dollar sign this, or anything like that. This is already a jQuery object. So we can use the jQuery API. So the first thing we want to do is find all of the H3 elements. And we are going to add the accordion header class to those elements. So we're going to call the add class method, and then pass an accordion dash header. But we also want to add the accordion dash panel class to all of the div elements, but those div elements are simply the next sibling to those H3 elements. So we can use the next method, and then we will do the same thing. We will call the .addClass() method, passing in the class that we want to set on those div elements accordion-panel. And really, the last thing that we want to do is then slide up all of those panels, because now that we have added the CSS, we want to essentially collapse all of the panels, so that everything is ready for the user to click on. So we will call the slide up method. And if we go ahead and save this, we are going to see this happen in the browser. So let's hop on over there, and there we can see that our markup is now styled. Now we could see the actual slide up animation if we refresh the page, and we see that that is taking place. So now the only other thing that we need to do is set up the click event listener. So let's head back over to our code. And let's say this .onClick. And we want to limit the click event for only the H3 elements. But in this case, let's use our accordion header class, and then our function, and inside of this function, we just want to toggle the state of the slide animation. But we want to do that only on the div element associated with the H3 element that we clicked on. So let's, first of all, get that div element. So I'm going to create a variable called next, and then we will get the target of the event that is our H3 element. We're going to wrap that in a call to the jQuery function, because the target property is just the HTML object itself, it's not a jQuery object. So we wrap that in a call to the jQuery function, and then we call the next method in order to get to that div element. And then we are simply going to toggle the slide, so we're going to call slideToggle, and that is going to give us our functionality. Now, most every jQuery method returns a jQuery object. In the cases that it doesn't return to jQuery object, it's returning some other value. Now, in our case, the accordion method doesn't need to return any type of value, except the jQuery object itself. So we're going to end this method with return this, that way if somebody wants to chain their method after calling accordion, they can do that. So let's save this. Let's go back to the browser, and whenever we click on the headings, we see those panels expand. And since we used that slide toggle method, we are going to see them collapse whenever we click on them, as well. So we have the basis for our jQuery plugin, but we need to make it customizable, and we will look at that in the next lesson.