Collapsibles do jQuery Mobile

Blocos de conteúdo dobráveis

Dobráveis (Collapsibles) permitem que você oculte ou mostre conteúdo - muito útil para armazenar informações parciais.

Para criar um bloco de conteúdo dobrável, atribua a propriedade data-role="collapsible" a algum contêiner. Dentro do contêiner (div), adicione um elemento de título (h1-h6), seguido de qualquer marcação HTML que você deseja expandir:

Exemplo

<div data-role="collapsible">
  <h1>Clique em mim - Eu posso dobrar!</h1>
  <p>Sou o conteúdo dobrável.</p>
</div>

Experimente pessoalmente

Por padrão, o conteúdo está fechado. Se você quiser expandir o conteúdo ao carregar a página, use data-collapsed="false":

Exemplo

<div data-role="collapsible" data-collapsed="false">
  <h1>Clique em mim - Eu posso dobrar!</h1>
  <p>Agora eu estou expandido por padrão.</p>
</div>

Experimente pessoalmente

Blocos dobráveis aninhados

Blocos de conteúdo dobráveis podem ser aninhados:

Exemplo

<div data-role="collapsible">
  <h1>Clique em mim - Eu posso dobrar!</h1>
  <p>Sou o conteúdo expandido.</p>
  <div data-role="collapsible">
    <h1>Clique em mim - Sou o bloco dobrável aninhado!</h1>
    <p>Sou o conteúdo expandido dentro do bloco dobrável aninhado.</p>
  </div>
</div>

Experimente pessoalmente

Dica:Blocos de conteúdo dobráveis podem ser aninhados quantas vezes você quiser.

Conjuntos dobráveis

Conjuntos dobráveis (Collapsible sets) se referem a blocos dobráveis combinados (requentemente chamados de concertina). Quando um novo bloco é aberto, todos os outros blocos são fechados.

Crie vários blocos de conteúdo, em seguida, use o data-role="collapsible-set" para empacotar esse bloco dobrável em um novo contêiner:

Exemplo

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Clique em mim - Eu posso dobrar!</h1>
    <p>Sou o conteúdo expandido.</p>
  </div>
  <div data-role="collapsible">
    <h1>Clique em mim - Eu posso dobrar!</h1>
    <p>Sou o conteúdo expandido.</p>
  </div>
</div>

Experimente pessoalmente

Mais Exemplos

Remova as bordas arredondadas com a propriedade data-inset
Como remover as bordas arredondadas dos collapsibles.
Minimize os collapsibles com data-mini
Como tornar os collapsibles mais pequenos.
Mude o ícone com data-collapsed-icon e data-expanded-icon
Como mudar o ícone dos collapsibles (padrão é + e -).