Blocos conteúdo dobráveis
Collapsibles permitem que você ocultar ou exibir conteúdo, o que é útil para armazenar peças de informação.
Para criar um bloco dobrável de conteúdo, atribua a data-role="collapsible" atributo para um recipiente. No interior do recipiente (div) , adicione um cabeçalho (H1-H6) ou elemento de legenda, seguido por qualquer marcação HTML que deseja ser expandida:
Exemplo
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div>
Tente você mesmo " Por padrão, o conteúdo é fechado. Para expandir o conteúdo quando a página é carregada, o uso data-collapsed="false" :
Exemplo
<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm
now expanded by default.</p>
</div>
Tente você mesmo " Aninhados dobráveis Blocks
blocos de conteúdo dobráveis podem ser aninhados (um dobrável dentro de um dobrável):
Exemplo
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div
data-role="collapsible" >
<h1>Click me - I'm a
nested collapsible block!</h1>
<p>I'm the expanded
content in the nested collapsible block.</p>
</div>
</div>
Tente você mesmo " blocos de conteúdo dobráveis podem ser aninhados quantas vezes quiser.
Conjuntos dobráveis
conjuntos dobráveis são blocos recolhíveis que são agrupados juntos (muitas vezes referida como um acordeão). Quando um novo bloco é aberto, todos os outros blocos perto.
Crie vários blocos de conteúdo dobráveis, e em seguida, enrole um novo recipiente com a data-role = "collapsibleset" em torno dos blocos recolhíveis:
Exemplo
<div data-role="collapsibleset" >
<div
data-role="collapsible">
<h1>Click me - I'm
collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the
expanded content.</p>
</div>
</div>
Tente você mesmo " mais Exemplos
pop-up dobrável
Como criar um popup desmontável.
Retirar canto arredondado com a data-inset atributo
Como remover cantos arredondados e adicionar largura total em collapsibles.
Minify collapsibles com o data-mini atributo
Como fazer collapsibles menor.
Alterar o ícone com desmoronou-data-ícone e-icon expandiu-data
Como alterar o ícone de collapsibles (padrão é + e -).
Alterando a posição do ícone
Como alterar a posição do ícone de collapsibles (o padrão é à esquerda).