Bootstrap 4 Zwiń
Podstawowy składany
Elementy zwijane są przydatne, gdy chcesz ukryć i pokazać dużą ilość treści:
Przykład
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Przykład wyjaśniony
Klasa .collapsewskazuje zwijalny element (w naszym przykładzie <div>); to jest treść, która zostanie pokazana lub ukryta za jednym kliknięciem przycisku.
Aby kontrolować (pokazywać/ukrywać) zawartość zwijaną, dodaj data-toggle="collapse"atrybut do elementu <a> lub <button>. Następnie dodaj data-target="#id"atrybut, aby połączyć przycisk z zawartością zwijaną (<div id="demo">).
Uwaga: W przypadku elementów <a> możesz użyć hrefatrybutu zamiast data-target
atrybutu:
Przykład
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Domyślnie zwijana zawartość jest ukryta. Możesz jednak dodać .showklasę, aby domyślnie wyświetlać zawartość:
Przykład
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Akordeon
Poniższy przykład pokazuje prosty akordeon poprzez rozszerzenie komponentu karty.
Uwaga: Użyj data-parentatrybutu, aby upewnić się, że wszystkie zwijane elementy pod określonym elementem nadrzędnym zostaną zamknięte po wyświetleniu jednego z zwijanych elementów.
Przykład
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
Kompletny Bootstrap 4 Zwiń odniesienia
Aby uzyskać pełne informacje na temat wszystkich opcji, metod i zdarzeń zwijania, przejdź do naszego podręcznika Bootstrap 4 JS Collapse Reference .