Hiệu ứng toggle cho nút Xem code sử dụng Scriptaculous

Hiệu ứng toggle được sử dụng nhiều trong thiết kế web, phổ biến nhất là có sự kết hợp của thư viện jQuery giúp tạo sự mượt mà cho hiệu ứng trượt. Hôm nay tôi xin giới thiệu hiệu ứng toogle có sử dụng thư viện Scriptaculous. Bạn có thể vận dụng hiệu ứng này để tạo nút Xem code đối với website/webblog giới thiệu về thủ thuật blog hay webdesign.

Trước tiên bạn cần đặt đoạn code dưới đây vào trước thẻ </head>:


Tiếp theo bạn thiết lập cấu trúc HTML như sau và đặt vào vị trí cần tạo nút Xem code.



Nếu bạn muốn thêm một nút Đóng sau nội dung code thì bạn tạo HTML như sau:



Nếu trong một bài viết mà bạn đặt nhiều nút Xem code thì cần phải đặt tên id lần lượt là Button1, Button2, Button3,…
Copy bài viết: <a href='https://yogaso1.blogspot.com/2010/12/hieu-ung-toggle-cho-nut-xem-code-su.html' title='Hiệu ứng toggle cho nút Xem code sử dụng Scriptaculous'>Hiệu ứng toggle cho nút Xem code sử dụng Scriptaculous</a> Tăng cỡ chữ Mặc định Giảm cỡ chữ