Tạo chức năng Hide/Show nội dung với Javascript

Lúc trước, mình có giới thiệu đến các bạn thủ thuật tạo tag Spoiler để ẩn nội dung bài viết giống các forum,  dùng thẻ DIV để hoạt động. Nếu bạn thích dùng Javascript hơn, hãy sử dụng thủ thuật Hide/Show ở bài viết này.

Để tạo chức năng này cho Blog, bạn hãy thực hiện các bước dưới đây. Nhưng trước tiên, mời bạn xem qua kết quả của thủ thuật :

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Dán đoạn code dưới đây vào ngay trên thẻ </head> :
   
   <style type="text/css">
   .commenthidden {display:none}
   .commentshown {display:inline}
   </style>
   <script type="text/Javascript">
   function togglecomments (postid) {
   var whichpost = document.getElementById(postid);
   if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
   } </script>
3. Save lại template. Vậy là bạn đã thiết lập chế độ Hide/Show cho Blog.
4. Để sử dụng chức năng trong bài viết, bạn chèn đoạn code dưới đây vào khung soạn thảo :
   
   <a href="javascript:togglecomments('ID-Name')">Click để Ẩn/Hiện nội dung</a><br />
   <div class="commenthidden" id="ID-Name">Nội dung</div>
   Note : Để chức năng hoạt động, bạn cần đặt ID-Name trùng khớp với nhau và ở trạng thái xuất bản (Trong trình soạn thảo sẽ không thấy hoạt động).
   

Vậy là bạn đã tạo được chức năng này cho Blog của mình rồi đấy. Hy vọng thủ thuật này sẽ làm bạn hài lòng. Chúc vui !