Hướng dẫn collapse bootstrap 3
Chào các bạn!
Đã lâu rồi, hôm nay mình mới quay trở lại với đề tài về bootstrap. Thật là một thiếu sót lớn khi mình giới thiệu về các component hữu dụng của bootstrap 3 nhưng lại bỏ qua collapse và accordion. Vậy nên bài này mình xin phép được bổ sung về cách tạo collapse và accordion với bootstrap 3.
1. Collapse
Để tạo collapse, chúng ta chỉ cần đoạn code khá đơn giản như thế này
Link with href
Button with data-target
Trong
đoạn code trên, các bạn dễ dàng thấy mình đã sử dụng 2 loại tag để hiển thị phần content bên dưới:
1 The screen will either appear blank or flash between the story?
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
2 I purchased the event collection items from the item shop and I don't have it in my items?
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Trong đoạn code trên, cần chú ý nhất đó là thuộc tính data-parent.
Thuộc tính data-parent để cho biết khi bạn chọn group này thì group này được hiển thị và group khác sẽ đóng lại.
Ngoài ra, bạn hãy để ý thuộc tính aria-expanded. Thuộc tính này cho phép collapse nào có trạng thái mặc định là open khi
set aria-expanded="true".
Tất nhiên để set status=open đối với 1 collapse thì cái này chưa đủ, chúng ta cần phải thêm class .in vào trong div panel-collapse.
Để trang điểm hoa lá cành thêm chút cho phần code demo, mình có thêm 1 đoạn css như sau:
.faqs-page {
.category-faq {
background-color: #343434;
font-weight: bold;
color: #fff;
font-size: 16px;
padding: 0 20px;
margin: 40px 0 30px;
height: 50px;
line-height: 50px;
}
.panel {
border: 0;
box-shadow: none;
}
.panel-group .panel+.panel {
margin-top: 10px;
}
.item-question {
border: 1px solid #ececec;
display: block;
line-height: 24px;
padding: 9px 50px 13px 70px;
font-weight: bold;
font-size: 15px;
position: relative;
color: #111;
&:after {
content: "\f068";
font-family: FontAwesome;
font-weight: normal;
position: absolute;
right: 18px;
top: 50%;
transform: translateY[-50%];
font-size: 20px;
color: #c30323;
}
&.collapsed {
&:after {
color: #111;
content: "\f067";
}
}
span {
width: 35px;
height: 35px;
line-height: 32px;
text-align: center;
border-radius: 100%;
background-color: #ececec;
display: inline-block;
position: absolute;
left: 17px;
top: 50%;
transform: translateY[-50%];
}
}
.panel-body {
padding: 20px 20px 20px 70px;
font-size: 15px;
line-height: 26px;
}
}
Bây giờ, chúng ta cùng đi coi kết quả nào:
1 The screen will either appear blank or flash between the story?
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
2 I purchased the event collection items from the item shop and I don't have it in my items?
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Trong đoạn code trên, mình đã bỏ đi thuộc tính data-parent này và để cho 2 collapse cùng ở trạng thái đóng. Và bây giờ cùng coi kết quả xem sao nhé.
Như vậy, qua bài này, chúng ta đã biết thêm 1 component khá hay của bootstrap. Nó rất dễ sử dụng. Chúc các bạn thành công!