You’re pretty much a pro at this point, so we can do some more neat things. Reading the title, you might think I’m talking about this kind of accordion

But really I’m talking about a really useful user interface widget. Go to the jQuery Mobile website page on accordions to see what they are and how to make them.

Making a Basic Accordion

You’ve got enough experience with how jQuery Mobile makes you use <div>’s and <div>’s within <div>’s, so this lesson will be easier for you than someone who was just starting out.

Collapsibles

Before we do accordions, we need to understand what makes them up, which are ui widgets called “collapsibles”. These are widgets that look like buttons that  expand to reveal content they’re hiding. Click here to see what they are.

They’re extremely simple to create. You just need 3 things:

  1. A <div> with the attribute data-role=”collapsible”
  2. As the first thing in the <div> an <h1> that will be the collapsible’s lable
  3. Some content to go inside the <div>

That’s really it. Take the following code as an example and see what it produces


<div data-role="collapsible">
<h1>This is a heading</h1>
<p>Hello World!</p>
</div>

Collapsed Expanded

Styling/Theming

You can alter colors, borders, and backgrounds of course. You should really go top the website for reference, but here are the two attributes to know:

  1. data-theme=”a-e”
  2. data-content=theme=”a-e”

where of course “a-e” means pick any letter a through e. Here are some examples:

Mid Lesson Break

Accordions

You basically know how to make accordions now. Go to the website and see if you can figure out how to make them.

As you can see, all you have to do is put a two or more collapsibles next to each other and wrap them in a <div> with the attribute data-role=”collapsible-set”.

Accordions are really useful for making large amounts of content smaller and for keeping content hidden. They basically keep things tidy, because only one section can be expanded at one time. See this example of how I turned the three collapsibles from earlier into an accordion. I’ve expanded the 2nd section so you can see what it looks like

There’s really nothing else to be said about accordions here. You know what you’re doing by now. If you want to learn more like how to change icons, or make a section automatically expanded, or whatever, then you should head over to the accordion page on the website.

Project

Find some way to incorporate an accordion. You might be running out of things to do to your proposal, so you can make some other app if you wish.

Check out mine, and see that I put my objectives into an accordion…for some reason.