Bloques de contenido plegables
Botes hinchables permiten ocultar o mostrar contenido, que es útil para almacenar partes de la información.
Para crear un bloque plegable del contenido, asigne la data-role="collapsible" atributo a un contenedor. Dentro del contenedor (div) , añadir una cabecera (H1-H6) o elemento de leyenda, seguido de cualquier tipo de código HTML que desea ser ampliado:
Ejemplo
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div>
Inténtalo tú mismo " De manera predeterminada, el contenido está cerrado. Para ampliar el contenido cuando se carga la página, el uso data-collapsed="false" :
Ejemplo
<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm
now expanded by default.</p>
</div>
Inténtalo tú mismo " Bloques anidados plegables
bloques de contenido plegables se pueden anidar (un plegable dentro de un plegable):
Ejemplo
<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>
Inténtalo tú mismo " bloques de contenido plegables se pueden anidar tantas veces como desee.
Conjuntos plegables
conjuntos plegables son bloques plegables que se agrupan (a menudo referido como un acordeón). Cuando se abre un nuevo bloque, todos los otros bloques de cierre.
Crear varios bloques de contenido plegables, y luego envolver un nuevo envase con la técnica de role = "collapsibleset" alrededor de los bloques plegables:
Ejemplo
<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>
Inténtalo tú mismo " Más ejemplos
emergente plegable
Cómo crear una ventana emergente plegable.
Retire esquina redondeada con la data-inset de atributos
¿Cómo eliminar las esquinas redondeadas y añadir ancho completo en botes hinchables.
Minify botes hinchables con la data-mini atributo
¿Cómo hacer más pequeña botes hinchables.
Cambiar el icono con datos colapsado-icono y-icono de datos expandida
Cómo cambiar el icono de botes hinchables (por defecto es + y -).
Cambio de la posición de icono
Cómo cambiar la posición de icono de botes hinchables (por defecto es la izquierda).