WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Collapsibles


Collapsible Content Blocks

Collapsibles enable you to stow away or show content, which is helpful for putting away portions of information.

To make a collapsible square of substance, appoint the information role="collapsible" credit to a compartment. Inside the compartment (div), include a header (H1-H6) or legend component, pursued by any HTML markup you need to be expanded:

Example

<div data-role="collapsible">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the extended content.</p>
</div>
Try it yourself »

By default, the substance is shut. To grow the substance when the page loads, use information collapsed="false":

Example

<div data-role="collapsible" information collapsed="false">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm presently extended by default.</p>
</div>
Try it yourself »

Nested Collapsible Blocks

Collapsible substance squares can be settled (a collapsible inside a collapsible):

Example

<div data-role="collapsible">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the extended content.</p>
  <div data-role="collapsible">
    <h1>Click me - I'm a settled collapsible block!</h1>
    <p>I'm the extended content in the settled collapsible block.</p>
  </div>
</div>
Try it yourself »


Collapsible Sets

Collapsible sets are collapsible hinders that are assembled together (frequently alluded to as an accordion). At the point when another square is opened, every single other square close.

Create a few collapsible substance squares, and after that wrap another compartment with the information role="collapsibleset" around the collapsible blocks:

Example

<div data-role="collapsibleset">
  <div information role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the extended content.</p>
  </div>
  <div information role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the extended content.</p>
  </div>
</div>
Try it yourself »