Đã thọ rồi, từ bây giờ bản thân new quay trở về cùng với vấn đề về bootstrap. Thật là một thiếu hụt sót Khủng Khi mình trình làng về những component hữu dụng của bootstrap 3 nhưng mà lại bỏ qua collapse cùng accordion. Vậy nên bài bác này bản thân xin phxay được bổ sung cập nhật về cách tạo thành collapse cùng accordion với bootstrap 3.
Bạn đang xem: Accordion là gì
1. Collapse
Để sinh sản collapse, họ chỉ việc đoạn code tương đối đơn giản như thế này
Trong đoạn code bên trên, các bạn thuận lợi thấy tôi đã sử dụng 2 nhiều loại tag để hiển Thị Trường content bên dưới: với .
Ngoài ra, còn 1 ở trong tính hết sức đặc biệt quan trọng với cũng chính là sẽ phải tất cả mặc dù các bạn thực hiện tag làm sao đi nữa đó là data-toggle="collapse".
Một vấn đề nữa, quanh đó tag a cùng button, bạn cũng có thể dùng bất kỳ tag như thế nào nhằm thay thế. Tất nhiên, ngoại trừ sử dụng href thì những tag không giống đề xuất thực hiện data-target.
Result:
2. Accordion
Accordion là gì? Hiểu một giải pháp dễ dàng thì accordion là tổ hợp những collapse. Chúng ta thường gặp accordion trong phần FAQ của trang web nào kia.
Hãy xem đoạn code bên dưới đây
Category 1
1 The screen will either appear blank or flash between the story?
Anyên ổn pariatur clibít reprehenderit, enyên eiusthủ thuật 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 anyên keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecát 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 vật phẩm shop & I don"t have it in my items?
Anlặng pariatur cliđậy reprehenderit, enyên ổn eiusgian lận high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truông chồng 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, phải để ý tuyệt nhất đó là nằm trong tính data-parent.
Thuộc tính data-parent nhằm cho thấy khi bạn chọn group này thì group này được hiển thị và group không giống đã đóng lại.
Ngoài ra, bạn hãy lưu ý ở trong tính aria-expanded. Thuộc tính này có thể chấp nhận được collapse nào tất cả tâm trạng mặc định là open Lúc phối aria-expanded="true".
Tất nhiên nhằm phối status=open đối với 1 collapse thì tính năng này chưa đầy đủ, chúng ta rất cần phải thêm class .in vào vào div panel-collapse.
Để make up hoa lá cành thêm chút dồn phần code test, bản thân bao gồm thêm một đoạn css nlỗi 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; và.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ờ, họ thuộc đi coi tác dụng nào:
3. Multi collapse
Trường hòa hợp bên trên là chúng ta chỉ open được 1 collapse. khi open collapse không giống thì collapse hiện nay sẽ yêu cầu đóng góp lại.
Nếu hy vọng mlàm việc nhiều collapse đồng thời thì bắt buộc có tác dụng nắm nào? Câu trả lời là sự việc nằm ở data-parent.
Nhỏng tại phần trên mình vừa giới thiệu. Thuộc tính data-parent để cho biết khi bạn lựa chọn group này thì group này được hiển thị với group khác đang đóng lại. Vậy cần, nếu muốn mlàm việc nhiều collapse thuộc 1 lúc thì chúng ta chỉ cần vứt đi ở trong tính data-parent này là ok.
Anim pariatur clibít reprehenderit, enim eiusgian lận 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 assumendomain authority shoreditch et. Nihil anlặng keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecát craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven"t heard of them accusamus labore sustainable VHS.
