Duration: 21 minutes
Summary: In this video, we continue our discussion of jQuery UI widgets by discussing the accordion. As we have done with the tabs, we create a page that contains the basic html used by an accordion. We will preview the page before and after the accordion functionality has been added. Then we will add the options one at a time and preview their impact on the accordion. Some of the options we are discussing include: header, active, disabled, animated, event, autoHeight, and collapsible. We will also discuss events and methods. We will look at couple of examples to learn the syntax of how to trigger an event and call a method.
Keyword: jQuery UI, Visual Studio 2010, accordion, header, active, disabled, animated, event, autoHeight, create, collapsible.
Transcrip: Hello, everyone. This is Ayad Boudiab. I'm a Senior .NET Application Developer, and we are working with our jQuery UI course. In the previous course, I explained for you the tab widget and went through the details of working with some options and events and methods. I showed you the syntax of how that works and how we can work with a tab and what we need to get a tab working.
In today's video, I need to talk about the accordion. An accordion is also a widget, like a tab, and you will see it in action right now and we'll see how we can work with that. The same concept I'm following here, so I'll show you the page without the accordion. Then we'll activate the accordion functionality. We'll see the difference, and then we'll start adding the options and events and methods and see how these would work all together to show us the functionality of the accordion. Again, if you need more details about the accordion, you can have that on the jQuery UI website where they have the actual widgets and the functionality available for every widget.
So, when the DOM is ready, I'll trigger a certain functionality here. Now what kind of functionality would I have? Scroll down in you'll notice in here, you've got the div as an ID accordion. It doesn't have to be accordion. You can name it anything you want, but in this case just to be clear, we named it Accordion. Now, you know that within jQuery, in order for you to reference this accordion, you need to go back to the code over here and use the dollar sign and then pound and accordion. That references the actually accordion div that you see below.
For this, like we did with the tabs, I'll trigger the accordion function. That accordion function, by itself like this, would not give me everything that I need. Let me show you that for a preview and see how it looks. You see something like this. Well, I mean, it looks like we are in the right direction, but not completely like we want an accordion to be. If you go back to the code, we notice in here that we need to provide jQuery UI with the reference to what actually references the div underneath. In this case, when I have that A-reference element below, what am I using around it? I'm using H3s. So you need to let the accordion know that that's what you're using, and as you've seen with the tabs, we provide a set of options in here. In this case, I'm providing the header option that I'm using H3. Simply adding this option, right clicking and viewing the page in the browser, you will notice that something's started working. This is how the accordion works. I have one section that's open. When I click on the other one, it closes the first, opens the second. Click on the third one, it closes the one above and opens the third. I can switch between those elements, and I can have only one of them open at a specific time. That's how the accordion works, and again, what you see here as far as the display, that's the custom CSS that I've been using, and that's part of the CSS that we downloaded from the jQuery UI website through the Theme Roller, of course.
Now, if I come back over here and I try to make some changes, let me comment this, so I can show that we're doing this on separate steps. So, in this case, let's see if I can disable the accordion. Again, that set off options that I have available. Options are available within the curly braces. One option is separated from the other option through commas, and key and value pairs are separated with a comma, like you see here: header, column, value. So in this case, if I need to disable the accordion, I can say disable and pass the value true. That should disable the accordion for me. Right click on the page, view in browser. If I click on the accordion, nothing's happening, right? It is disabled. The first one's always opened in this case, but nothing's happening when I click on them. Although it shows like it's a link, but when I click on it, nothing happens. So that's how I can disable an accordion.
Let's comment this again and try to add some more functionality. Now what if I need a certain piece of the accordion to be active? I don't want only the first one to show as active. I want maybe the third one to show as active. Well, that's also one of the options that I have available for an accordion. Again, I separate my actions through a comma, and I say active and give it a value 2, because remember, like it's in the tabs, in the accordion the pieces are zero-based. So when I say "2," I mean the third one. So this says that I display the accordion but make the third one as the active one. View in browser, and here's the accordion with the third one being the active. Now I can move through it and open the other tabs or the other pieces of the accordion.
Now, let's continue with our discussion. Let's see what other options I have available. Remember I'm keeping the H3 in here because I need to reference that header. If I leave that out, my accordion would not work properly. Can I make the accordion active like I did in the previous one? I made it active and provided the value 2, that's because I need the third one active. Well, how about if I need something like this active, false. The accordion would not be active. Let's just stop here and try to preview it. There's one more fix I'd like to make, but let's try to preview it.
Well what's happening in here? I thought I set the accordion. I want it to be active as false. Let's add one more option here, collapsible true. So I added the header. I made active be false, and collapsible being true. View in browser and active is false, and everything within the accordion is actually collapsed because I need to make sure that everything is collapsed, because remember that one of the items within the accordion needs to opened at the specific time. So, in this case, I have to make the collapsible being true in order for all the options within the accordion to be collapsed. If I take this feature and try to animate something, let me fix this comment here, make it all line up properly.
Now let's take this option and try to add some animation to it. One of the options available to me is animated. One of the values for animated is bounce slide. So let's see how that works. I pass in the animated option, and I provide for it the value "bounce slide." Right click on it, preview it, and you see how it's bouncing. Bounce slide, that's the animation that I just added for this specific feature. It looks like if you open the last one it doesn't do that, but for the middle one it actually bounce slides and the same thing for the top one. So, that's one of the animation features that I can add to an accordion.
Now, how about if I need to . . . remember when we were working tabs, and we said I need to click on one of the tabs in order to trigger that specific tab? But then we switched to an event of a mouse over event, and I used that as a way to trigger a specific tab. Well, this feature is also available for an accordion, and we can have the event as mouse over, so when we hover over one of the options, its specific div will be displayed.
So, let's take Orginal Accordion and let's add that feature. Remember it's called event. This event option I want it to be as a mouse over event, not a click event. By default, you get the click. You don't have to do anything. But in the event of changing to mouse over, you have to provide that as an option. You should right click, view in browser, and notice that I'm not clicking. As I'm hovering over the link, it's switching to the specific related div.
Let's continue. Now copy that. Let me do one thing in here and then go back to the option. Let's go ahead and scroll down to the actual text. You'll notice in the third div, every specific div in here has a div with the content. Now for the third div, I'm going to add something like a break, and then here is some more content. So I provided some more text and probably another break and even more content, just something like that. Let's go ahead and let me make sure that I have that ready. Let's go ahead and view it in the browser. You'll notice here's the text. Look at the size of it. The size of the accordion is modified to suit that text, but on the second one it's also with the same height, although there's no text, just there are some spaces here. Same thing on the first one. They're all the same size, but only the third one contains the text. The others don't. They just have empty spaces in here. Is that something we can fix?
If I scroll up and try to change one of the options, that option is called auto-height. Don't just give me an automatic height based on the biggest one. I don't want that feature, so I turn auto-height to off. By setting that auto-height to false, when I view that in the browser, you'll notice that the first one does display the content, but there are no additional spaces. Same thing for the second one, but for the third one you have a bigger space for the bigger content. That's one of the features or options that you can turn on or off depending on your needs. Let me just remove that last piece of text that I've added. Let's continue.
Now, one of the things that I showed you also with the tabs is how we can work with events. So I have the accordion. I have the option available. Now one of the options that I can have is actually an event that needs to be triggered, maybe when the accordion is created. For a create, instead of providing the actual value as XYZ, like we've done we the others, I have to provide a function that's triggered when the Create event is triggered. So here's the function. You know that functions take event and UI as parameters, or the actual event that was triggered and the UI element that's been affected and here's the body of the function. The body of the function I can simply say "alert" and provide some information like the accordion has been created. So this is one of the events that I want to happen, which is the Create Event. Right click, view in browser, and here's the alert being triggered whenever the accordion has been created.
Now how about if I want to use a method like we did with the tabs? Let's copy this, and again I'm just copying them over so I can leave that for you in the code that I attached to the video so you can see everyone step what we've done for a specific feature or an event. So in this case, then I want to trigger a certain a function. H3, I'm going to leave it. I'm going to make the collapsible as true; and then the create function, here's the body for the create function. For the create function, I want to activate the third part of the accordion, the third piece. So, in that case then, remember like we've done before, we need to reference that accordion. Okay, I did that, and now, within that I can provide the name of the method that I want to trigger. This method is called activate. I want to activate which one, pass as a parameter 2, which references the third part of the accordion. Now when I right click and preview in the browser, we see that the third one has been activated.