Rút gọn phần mở rộng của Widget Archive

  Nếu bạn đang sử dụng kiểu Thứ bậc cho widget Lưu trữ Blog của bạn thì bạn sẽ thấy nó khá đồ sộ. Hôm nay, Karl sẽ giới thiệu cho các bạn cách thu gọn tự động Widget này và bạn cũng có thể mở rộng nó chỉ bằng một cú nhấp chuột.

>Demo

Lưu ý: Widget lưu trữ của bạn phải được thiết lập kiểu Thứ bậc (như trong hình) thì mới có thể thực hiện thủ thuật này.

Sau khi hoàn tất việc thiết lập cấu hình cho Lưu trữ, bạn chèn đoạn mã sau vào trước thẻ </Body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>  
if ( $('.archivedate').hasClass('expanded') ) 
{ 
 $('.archivedate').removeClass('expanded'); 
$('.archivedate').addClass('collapsed'); 
}
</script>

Lưu Mẫu. Thế là xong!
Note:
Nếu trong Template của bạn đã có khai báo Jquery rồi thì hãy xóa dòng màu tím để tránh xung đột code.

Đoạn mã trên hoạt động như thế nào?

Trước hết chúng kiểm tra xem trong class archivedate có class nào tên là Expanded không, nếu có thì chúng sẽ thực hiện việc cắt bỏ class Expanded và thay vào đó là class collapsed.