jQuery UI Widgets
Illustration by John Hersey

Building an accordion widget


jQuery UI Widgets

with Joe Chellman

Video: Building an accordion widget

In this movie we're going to take a loot at what it's like I've triggered it with this button.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course jQuery UI Widgets
33m 53s Intermediate Nov 11, 2013

Viewers: in countries Watching now:

Despite the possibilities offered in HTML5, there's still a call for customizable widgets that can be used in websites and web apps. jQuery UI, a popular plugin for jQuery, is here to answer that call. Joe Chellman shows how to install the plugin, use the accordion and date picker widgets, and add behaviors that change how existing page elements respond to user input. Finally, you'll apply the concepts you've learned to a typical project you might see coming from a client—a survey form.

This course is a short companion piece to jQuery for Web Designers. See that course for information about building your core jQuery skill set.

Joe Chellman

Building an accordion widget

In this movie we're going to take a loot at what it's like to work generally with jQuery UI widgets, taking the accordion as our example. Here is a page with our fairly plain HTML, and over here is the real file. I have moved around the installation of jQuery UI so that I won't have to copies of it in every singe lesson folder for the exercise files. So eagle-eyed viewers may have noticed that some of these pads are a little different than when we installed it in the installation movie. So here is the mark up. It's fairly simple, just headers followed by divs.

Every jQuery UI widget has specific requirements for the structure of its HTML. In the case of the accordion, it's just some sort of header type thing, followed by some sort of other type thing. It can be just about whatever you want, as long as they're at the same level in the DOM. Just read the documentation for the different widget types that you want to implement and make sure that your HTML fits the requirements, or you might get unexpected effects. And when I instantiate the jQuery UI accordion widget, all of that gets turned into this.

I've triggered it with this button. So, I'm going to reload and we'll look at how this is actually working. Scroll down a little more, here's my button. And, here is the code. As you can see, it couldn't hardly be simpler. Here's jQuery UI. And, now down here, I'm selecting an element called group of three, which you can see is the ID that contains the headers and then their divs. So I'm just saving that, and then when this trigger button is clicked, all I'm doing is calling the accordion method on that group, and that's it. When this first loads, these are all the default behaviors.

One pane is always open. I can also navigate this whole thing by keyboard. So, you may see the second one is highlighted now and now the last one. And if I hit Return, it opens. So, there's some pretty good accessibility built into jQuery UI as well, despite the fact that these are made with Java script. So this is what this widget looks like with no options configured whatsoever. If we look over on the jQuery UI website, there's a series of demos that are available for every widget type. And they have lots of different examples on different kinds of behaviors that you might find useful.

So here's their default configuration with another one of the default themes. And you can also see that there are some versions where you can collapse every section, or you can customize these icons and all that sort of thing. There's a lot of examples here which is nice in itself, but then also, here, you can view the source for that example. In addition, if you scroll down a little further, you can see, you want to see more about the accordion widget, check out the API, which will link you to the API page for that particular widget, or whatever else it is you're looking at.

So looking at this, we can see that the accordion widget has quite a few options, it has some methods, and it has some events you can hook into. The main thing we're interested in right now is the options. So, I can set some options when I create this accordion by passing in an object. The animate option can take a whole bunch of different data types, but what I want to do right now is just disable animation. So, all I need to do is set it to false. Jumping back up to the top, collapsible will allow me to collapse all of those content panes.

So I can set that to true. And then I can also use the event option to choose a different event that will cause each of these panes to disclose. Of course, I'm clicking. That's the default, but I can also use mouse enter. So if I save this, come back here and reload. When I first reload, of course, nothing's happening because I have this triggered by this button. So I'll click the button. And then you can see there's no animation, but when I mouse over these things, they open up. And I can collapse all of them, reset the options to their defaults, and there's one more thing I want to discuss about these options on any of these widgets.

So I've reloaded. You can set options both when you create the widget, and there are also some options that make sense that you can work with after the widget has been created. So let's say that in my accordion, I want to use these links in the content to jump to the next pane. We're not doing that right now. So, let's inspect one, each of these links has an id. So I'm just going to use one of them for now, I'm going to add a click listener to that link. I'm going to keep this prevent default. And now, to jump to a different section, I'm going to use the Active option.

This tells jQuery UI which of the panes I want to be active, and here's how I set that option. I call the same method on the same object again, and I pass in an argument, called option, followed by the name of the option that I want to change, which in this case is active. And now, the number of the pane. And these are zero indexed, so the first of these panes would be zero, and the next one would be one and this one would be two.

So what I'm doing here is telling this link, which has this ID, that I want it to activate the next pane. So let me save this and reload. Get this going, and now when I click this link, the next pane is made active. So you can see that that's an easy way to allow the content to navigate three accordion for you. jQuery has many widgets and they all have a very rich set of options that you can play with. And you can set them when you create the widget or at any time afterwards.

So that's a look at how to work with the jQuery UI accordion widget, but we've learned a lot things that apply to all widgets.

There are currently no FAQs about jQuery UI Widgets.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed jQuery UI Widgets.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.