Katlanır İçerik Blokları
Collapsibles gizlemek ya da bilgi parçalarını saklamak için yararlıdır içerik göstermek için izin verir.
Içerik daraltılabilir bir blok oluşturmak için atamak data-role="collapsible" Bir kaba özelliği. Kap İçinde (div) , bir başlık eklemek (H1-H6) Eğer genişletilecek istediğiniz herhangi bir HTML işaretleme tarafından takip veya efsane elemanı,:
Örnek
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div>
Kendin dene " Varsayılan olarak, içerik kapalıdır. Sayfa yüklendiğinde, kullanım sırasında içerik genişletmek için data-collapsed="false" :
Örnek
<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm
now expanded by default.</p>
</div>
Kendin dene " İçiçe Katlanır Blokları
Katlanır içerik bölümleri içiçe geçebilir (a collapsible inside a collapsible) :
Örnek
<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>
Kendin dene " istediğiniz kadar Katlanır içerik blokları olarak defalarca iç içe olabilir.
Katlanır Setleri
Katlanabilir setleri (genellikle bir akordeon olarak adlandırılır) bir araya toplanır katlanabilir taşlarıdır. Yeni bir blok açıldığında, diğer tüm blokları yakın.
Birkaç katlanabilir içerik bloklarını oluşturun ve sonra yeni bir konteyner sarmak data-role="collapsibleset" katlanabilir blokların etrafında:
Örnek
<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>
Kendin dene " Diğer Örnekler
Katlanır açılan
daraltılabilir bir açılır pencere oluşturma.
Ile yuvarlatılmış köşe çıkarın data-inset öznitelik
Nasıl yuvarlatılmış köşeler kaldırmak ve collapsibles tam genişliğini ekleyin.
Küçültme ile collapsibles data-mini özniteliği
collapsibles küçültmek için nasıl.
Veri çöktü-simgesi ve veri genişletilmiş simgesiyle simge değiştirme
Nasıl collapsibles simgesini değiştirmek için (default is + and -) .
Simge konumunu değiştirme
Nasıl collapsibles simgesi konumunu değiştirmek için (default is left ) .