Collapsibles
hữu ích khi bạn muốn ẩn/hiện 01 lượng lớn nội dung.
<
button
data-toggle
=”collapse”
data-target
=”#demo”>
Collapsible
<
/button
>
<
div
id
=”demo”
class
=”collapse”>
Lớp
học vi tính.COM….
<
/div
>
Lớp
.collapse
chỉ
ra 01 phần tử collapsible (01 thẻ <div> trong ví dụ);
đây là nội dung sẽ bị ẩn đi hay hiện ra khi bấm vào
nút.
Để
điều khiển (ẩn/hiện) nội dung collapsible, ta thêm thuộc
tính
data-toggle="collapse"
vào
01 thẻ <a> hoặc 01 thẻ <button> . Sau đó thêm
thuộc tính
data-target="#id"
để
kết nối nút bấm với nội dung collapsible (<div
id=”demo”>).
Ghi
chú:
Đối
với thẻ <a>, bạn có thể dùng thuộc tính
href
thay
vì
data-target
<
a
href
=”#demo”
data-toggle
=”collapse”>
Collapsible
<
/a
>
<
div
id
=”demo”
class
=”collapse”>
Lớp
học vi tính.COM….
<
/div
>
Mặc
định , phần nội dung collapsible bị ẩn đi. Tuy vậy, bạn
có thể thêm lớp
.in
để
hiện nội dung 01 cách mặc định.
<
div
id
=”demo”
class
=”collapse
in”>
Lớp học vi tính.COM….
<
/div
>
<
div
class
=”panel-group”>
<
div
class
=”panel
panel-default”>
<
div
class
=”panel-heading”>
<
h4
class
=”panel-title”>
<
a
data-toggle
=”collapse”
href
=”#collapse1″>
Collapsible
panel
<
/a
>
<
/h4
>
<
/div
>
<
div
id
=”collapse1″
class
=”panel-collapse
collapse”>
<
div
class
=”panel-body”>
Panel
Body
<
/div
>
<
div
class
=”panel-footer”>
Panel
Footer
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
class
=”panel-group”>
<
div
class
=”panel
panel-default”>
<
div
class
=”panel-heading”>
<
h4
class
=”panel-title”>
<
a
data-toggle
=”collapse”
href
=”#collapse1″>
Collapsible
list
group
<
/a
>
<
/h4
>
<
/div
>
<
div
id
=”collapse1″
class
=”panel-collapse
collapse”>
<
ul
class
=”list-group”>
<
li
class
=”list-group-item”>
One
<
/li
>
<
li
class
=”list-group-item”>
Two
<
/li
>
<
li
class
=”list-group-item”>
Three
<
/li
>
<
/ul
>
<
div
class
=”panel-footer”>
Footer
<
/div
>
<
/div
>
<
/div
>
<
/div
>
Ví
dụ sau hiển thị 01 menu accordion cơ bản.
Ghi
chú:
Sử
dụng thuộc tính
data-parent
để
đảm bảo rằng tất cả phần tử collapsible thuộc 01
phần tử cha sẽ đóng lại khi 01 trong các phần tử khác
mở ra.
<
div
class
=”panel-group”
id
=”accordion”>
<
div
class
=”panel
panel-default”>
<
div
class
=”panel-heading”>
<
h4
class
=”panel-title”>
<
a
data-toggle
=”collapse”
data-parent
=”#accordion”
href
=”#collapse1″>
Collapsible Group 1
<
/a
>
<
/h4
>
<
/div
>
<
div
id
=”collapse1″
class
=”panel-collapse
collapse in”>
<
div
class
=”panel-body”>
Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad
minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
<
/div
>
<
/div
>
<
/div
>
<
div
class
=”panel
panel-default”>
<
div
class
=”panel-heading”>
<
h4
class
=”panel-title”>
<
a
data-toggle
=”collapse”
data-parent
=”#accordion”
href
=”#collapse2″>
Collapsible Group 2
<
/a
>
<
/h4
>
<
/div
>
<
div
id
=”collapse2″
class
=”panel-collapse
collapse”>
<
div
class
=”panel-body”>
Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad
minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
<
/div
>
<
/div
>
<
/div
>
<
div
class
=”panel
panel-default”>
<
div
class
=”panel-heading”>
<
h4
class
=”panel-title”>
<
a
data-toggle
=”collapse”
data-parent
=”#accordion”
href
=”#collapse3″>
Collapsible Group
3
<
/a
>
<
/h4
>
<
/div
>
<
div
id
=”collapse3″
class
=”panel-collapse
collapse”>
<
div
class
=”panel-body”>
Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad
minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
<
/div
>
<
/div
>
<
/div
>
<
/div
>
