- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Dialogs
- Fixed toolbars
- Flip switch toggle
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icons
- Links
- Listviews
- Loader overlay
- Navbar
- Navbar, persistent
- Pages
- Panels New
- Popup
- Radio buttons
- Select
- Slider, single
- Slider, dual range New
- Table, column toggle New
- Table, reflow New
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Reflow: Refresh method
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle: Refresh method
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working.
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- Events
- How do I use touch and mouse events?
- Theme and styling
- How does theming work?
- Apps
- How do I need to configure PhoneGap/Cordova?
Accordions API
An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set.
Markup
Collapsible sets start with the same markup as individual collapsibles which have a heading followed by the collapsible content. By adding a parent wrapper with a data-role="collapsible-set" attribute to the collapsibles they will be visually grouped and they will behave like an accordion so only one section can be open at a time.
Section 1
I'm the collapsible content for section 1
Section 2
I'm the collapsible content for section 2
Section 3
I'm the collapsible content for section 3
Inset vs. full width
For full width collapsibles without corner styling add the data-inset="false" attribute to the set. This makes the collapsible set look more like an expandable listview.
Animals
- Cats
- Dogs
- Lizards
- Snakes
Cars
- Acura
- Audi
- BMW
- Cadillac
Planets
- Earth
- Jupiter
- Mars
- Mercury
Mini
For a more compact version that is useful in tight spaces, add the data-mini="true" attribute to the set.
I'm a mini collapsible
This is good for tight spaces.
I'm another mini
Here's some collapsible content.
Last one
Final bit of collapsible content.
Icons
The default icons of collapsible headings can be overridden by using the data-collapsed-icon and data-expanded-icon attributes, either at the collapsible-set level or on any of its collapsibles individually.
Icon set on the set
Specify the open and close icons on the set to apply it to all the collapsibles within.
Icon set on the set
This collapsible also gets the icon from the set.
Icon set on this collapsible
The icons here are applied to this collapsible specifically, thus overriding the set icons.
Icon position
The default icon positioning of collapsible headings can be overridden by using the data-iconpos attribute, either at the collapsible-set level or on any of its collapsibles individually.
Right
Inherits icon positioning from data-iconpos="right" attribute on set.
Left
Set via data-iconpos="left" attribute on the collapsible
Bottom
Set via data-iconpos="bottom" attribute on the collapsible
Top
Set via data-iconpos="top" attribute on the collapsible
Corners
Add the data-corners="false" attribute to get an inset collapsible set without rounded corners.
Section 1
Collapsible content
Section 2
Collapsible content
Section 3
Collapsible content
Theme
Add a data-theme attribute to the set to set the color of each collapsible header in a set. Add the data-content-theme attribute to specify the color of the collapsible content.
1 - Theme A
Content theme A
2 - Theme A
Content theme A
To have individual sections in a group styled differently, add data-theme and data-content-theme attributes to specific collapsibles.
Section header, swatch B
Collapsible content, swatch "b"
Section header, swatch A
Collapsible content, swatch "a"
Section header, swatch E
Collapsible content, swatch "d"