` through `

`) followed by any HTML markup you want to collapse or expand. ```html

Click me - I am collapsible!

I am the collapsible content that is hidden by default.

``` ### Expanding Content by Default By default, collapsible blocks are closed when the page loads. If you want a block to be expanded initially, add the `data-collapsed="false"` attribute to the container: ```html

Click me - I am collapsible!

I am expanded by default when the page loads.

``` --- ## 2. Nested Collapsible Blocks jQuery Mobile allows you to nest collapsible blocks inside one another to create hierarchical, multi-level menus or content structures. ### Example of Nested Collapsibles ```html

Click me - I am the parent block!

I am the parent content area.

Click me - I am a nested block!

I am the content inside the nested collapsible block.

``` > **Developer Tip:** You can nest collapsible blocks as deeply as your application design requires, but keep mobile usability in mind to avoid overly complex hierarchies. --- ## 3. Collapsible Sets (Accordions) A **Collapsible Set** (commonly known as an **Accordion**) groups multiple collapsible blocks together. When a user expands one block in the set, any other open block automatically collapses, ensuring only one section is visible at a time. To create an accordion, wrap your individual collapsible blocks inside a container element configured with the `data-role="collapsible-set"` attribute: ```html

Section 1

This is the content for Section 1.

Section 2

This is the content for Section 2.

Section 3

This is the content for Section 3.

``` --- ## 4. Advanced Customization & Attributes jQuery Mobile provides several `data-` attributes to customize the appearance and behavior of collapsible widgets. ### Removing Rounded Corners and Margins (`data-inset`) By default, collapsible blocks have rounded corners and margins (inset style). To make them span the full width of the screen without rounded corners, set `data-inset="false"`: ```html

Full-Width Collapsible

This block has no margins or rounded corners.

``` ### Mini Sizing (`data-mini`) For more compact layouts, you can render a smaller version of the collapsible block using the `data-mini="true"` attribute: ```html

Mini Collapsible

This is a compact version of the collapsible widget.

``` ### Customizing Icons (`data-collapsed-icon` & `data-expanded-icon`) By default, jQuery Mobile uses a plus icon (`+`) for collapsed states and a minus icon (`-`) for expanded states. You can change these icons using the `data-collapsed-icon` and `data-expanded-icon` attributes: ```html

Custom Icons

This block uses right and down arrows instead of plus and minus icons.

``` ### Changing Icon Position (`data-iconpos`) You can change the position of the toggle icon (which defaults to the left side) using the `data-iconpos` attribute. Supported values include `left`, `right`, `top`, and `bottom`: ```html

Icon on the Right

The toggle icon is positioned on the right side of the header.

``` ### Collapsibles Inside Popups Collapsible blocks can also be embedded inside other jQuery Mobile widgets, such as popups, to create interactive, space-saving menus: ```html

Menu Group 1

• Link 1.1
• Link 1.2

Menu Group 2

• Link 2.1

``` --- ## Summary of Key Attributes | Attribute | Options | Default | Description | | :--- | :--- | :--- | :--- | | `data-role` | `collapsible` \| `collapsible-set` | N/A | Defines the element as a collapsible block or a group of blocks (accordion). | | `data-collapsed` | `true` \| `false` | `true` | Determines whether the block is collapsed or expanded on page load. | | `data-inset` | `true` \| `false` | `true` | Specifies whether the widget has rounded corners and margins. | | `data-mini` | `true` \| `false` | `false` | Renders a smaller, more compact version of the widget. | | `data-collapsed-icon` | | `plus` | Sets the icon for the collapsed state. | | `data-expanded-icon` | | `minus` | Sets the icon for the expanded state. | | `data-iconpos` | `left` \| `right` \| `top` \| `bottom` | `left` | Sets the position of the toggle icon in the header. |