Người Viết : ViKiMi Editor

Thiết kế Bootstrap Collapse và Accordion tạo điểm nhấn mạnh thông tin cho Website !
Chắc hẳn nhiều lý thuyết về Design a Website đã nói về JS Collapse, đây là một Plugin cho phép thiết kế độc đáo các thành phần có thể thu gọn trên trang Web : Thành phần thông dụng hoặc Menu điều hướng etc… Có thể cảm nhận được rõ ràng sự tiện ích khi sử dụng JS Collapse. JS Collapse giúp đặt trọng tâm vào các thông tin cần chú ý.
Nếu sử dụng JS Collapse thì sẽ dễ dàng giúp người dùng nhận ra các thông tin quan trọng đối với họ. Khi đã nhận ra được thông tin quan trọng, người dùng Click / Kích chuột vào nội dung thu gọn Và sau đó các thông tin chi tiết sẽ được hiển thị. Việc này giúp tiếp cận phần thông tin chi tiết sẽ được mở ra.
( CLick/ Nhấp chuột vào nội dung thu gọn >> Hiển thị Thông tin Chi tiết )
A ) TỔNG QUAN JS COLLAPSE
Hình Ảnh :

1 ) Plugin này cung cấp cho chúng ta những Class để tạo một thiết kế như sau:
.collapse : Tại thời điểm ban đầu, giúp ẩn đi phần nội dung chi tiết
.collapse in : Tại thời điểm ban đầu, giúp hiển thị phần nội dung chi tiết
.collapsing : Đây là Class sẽ được thêm vào khi hiện ứng chuyển đổi được bắt đầu Và bị xoá đi khi hiệu ứng chuyển đổi kết thúc. Việc thêm vào và xoá đi Class này cho phép tạo ra các thiết kế theo bối cảnh.
Hiệu ứng chuyển đổi là hiệu ứng sẽ ẩn & hiện phần nội dung chi tiết
2 ) Các thuộc tính dành cho COLLAPSE
+ Có 2 thuộc tính cần quan tâm là data-toggle=”collapse” & data-target. Đây là 2 thuộc tính cần thêm vào Phần Tử giúp điều khiển hiệu ứng COLLAPSE. Thông thường sẽ chọn Phần Tử này là một Button.
+ Và Hãy chắc chắn rằng thêm Class .collapse vào phần tử nội dung chi tiết để đảm bảo hoạt động của hiệu ứng
Example :
<div class="container"> <h2>PHẦN TỬ COLLAPSE</h2> <button type="button" class="btn btn-success" data-toggle = "collapse" data-target = "#mycontent" > HIỂN THỊ </button> <div id="mycontent" class = "collapse" > <!--- NỘI DUNG HIỂN THỊ ---> </div> </div>
Ngay ở Example trên chung ta thấy cách sử dụng rất đơn giản đó là dùng HTML và Bootstrap đã có thể tạo hiệu ứng COLLAPSE.
Cách thứ 2 để tạo hiệu ứng COLLAPSE đó là sử dụng với Javascript (jQuery). Chúng ta có thể làm dễ dàng với Mã Javascript (jQuery):
$(‘.collapse’).collapse()
Chi tiết Code của cách 2 :
<body> <div class="container"> <h2>PHẦN TỬ COLLAPSE</h2> <button type="button" class="btn btn-success"> HIỂN THỊ </button> <div class = "collapse" > <!--- NỘI DUNG HIỂN THỊ ---> </div> </div> <script> $(document).ready(function(){ $(".btn-success").click(function(){ $(".collapse").collapse(); }); }); </script> </body>
B ) SỬ DỤNG ACCORDION
Sử dụng Accordion cho phép tạo ra hiệu ứng đẹp mắt.
+ Sẽ tồn tại một phần tử cha, và Phần Tử Cha sẽ chứa nhiều phần tử con có hiệu ứng COLLAPSE.
+ Các phần tử con có hiệu ứng COLLAPSE đều có khả năng ẩn và hiện các nội dung của nó. Chính lúc này Accordion đã phát huy tác dụng tối đa nhất.
+ Sử dụng Accordion mang lại cho chúng ta thiết kế:
Khi một Phần tử con có phần nội dung chi tiết được hiển thị; thì tất các nội dung chi tiết của phần tử con còn lại đều được ẩn đi.
Accordion đã đem lại một thiết kế đẹp mắt cho những phần của Website cần đến nó. Đặc biệt các thiết kế Website thông tin sản phẩm.
Example :
<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"> Panel 1 </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> <!--- NỘI DUNG HIỂN THỊ 1 ---> </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"> Panel 2 </a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> <!--- NỘI DUNG HIỂN THỊ 2 ---> </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"> Panel 3 </a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body"> <!--- NỘI DUNG HIỂN THỊ 3 ---> </div> </div> </div> </div> Hình Ảnh :

Bootstrap Collapse And Accordion !!!