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 !

4 Nhận xét on "Tạo chức năng Hide/Show nội dung với Javascript"

NAD on 29 July 2009 at 21:31 said...

Cái này ko cần lắm, nhưng thanks :D

Triệu Đình Phúc on 1 February 2010 at 20:31 said...

ah ah pro ơi cho hỏi tí cái đoạn có id-name là chèn ở đâu vậy, khung soạn thảo bài viết hay là khung comment vậy, id-name là ghi cái gì , mình chưa hiểu rõ lắm, hi vọng pro giải đáp giúp, thank nhìu nhìu

Binh Ngo on 17 August 2010 at 22:40 said...

Cho hỏi tạo trang chủ rồi làm cách nào tạo trang phụ thứ phụ thứ 2 (hoặc nhiều trang kế tiếp)
Thí trang chủ - thư vien - hình ảnh - video ....
Xin chi dùm cách thực hiện - Cám ơn
binhngo20@gmail.com

Thanh Liem Huynh on 5 July 2013 at 14:13 said...

cảm ơn bạn, mình đã tạo cho blog của mình

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3