RSS Posts 
[FD's BlOg] - Chỉ với 1 dòng lệnh kết hợp với các thẻ div là bạn có thể tạo 1 button cho phép ẩn hiện nội dung của bạn khi click vào nó. Thủ thuật này mình post theo yêu cầu của bạn mecuoi (mecuoi.com). Thủ thuật này ta thường thấy trong các forum, và bạn mecuoi cũng lấy ý tưởng từ đó.Demo:
Phần nội dung hiển thị
Code:
Phần nội dung hiển thị
<div>
<div>
<input type="button" value="Xem" style="width:75px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }">
</div>
<div>
<div style="display: none;">
{Phần nội dung bị ẩn}
</div>
</div>
</div>
- Khi các bạn muốn áp dụng cho bài viết của mình thì cứ việc thay thế dòng {phần nội dung bị ẩn} thành nội dung bài viết của bạn là xong.
- Nếu bạn muốn tạo nhiều nút Ẩn/Hiện trong bài viết của mình thì cứ làm tương tự.
Chúc các bạn thành công.
Hơ vậy cái này có thể thay thế cho Readmore được không FD ?
Pro qua' ! tem tem tem ^^ !
@Thành công: hoàn toàn có thể bạn à, nhưng phải làm bằng tay, tức là mỗi lần bạn soạn thảo bài viết đều phải copy code của thủ thuật này vào.
Thay thế Phần nội dung hiển thị thành nội dung của bài viết sẽ được thấy, còn phần nội dung bị ẩn thì bạn thay bằng nội dung của bài viết sẽ được hiển thị khi nhấn vào.
Nhưng ở đây sẽ khác readmore, tức là khi nhấn readmore bạn sẽ vào trang bài viết, còn khi nhấn buttom này thì bạn vẫn ở trang hiện tại.
Ngoài ra cái buttom đó có thể thay thế bằng ảnh hoặc link, đều được. Ví dụ mình sẽ sửa chữ Xem/Ẩn lại thành : Xem thêm/Đóng lại, và thêm 1 thuộc tính float:right; để cho nó nằm sang phải. Như vậy sẽ trông y chang tiện ích Readmore
tuy nhiên 1 bất tiện khác là khi bạn thay thế như vậy thì cái nút Ẩn/Xem vẫn nằm ở đó, như thế trông không đẹp cho lắm.
ừ làm tay hơi cực nhỉ. Mình đang thử thì mới nhận ra nên phải suy nghĩ lại coi có ap dụng không. Cái này thực sự ko phải blog nào cũng phù hợp áp dụng đâu, cũng tùy theo bố cục của từng blog thui chứ post nhiều bài mà làm tay thì hơi mệt :D. Cám ơn Dung đã nhiệt tình giả thích chi tiết cho mình hiểu thêm:D
@Thành công: uh, với lại mình cũng chưa thấy ai làm nút Readmore kiểu này cả, thôi cứ để nó theo cách truyền thống đi :D
Hay quá :) , mình biết cái này lâu rồi , nhưng mà là view source của mấy diễn đàn rồi đem xài - code dài dòng chưa kể mỗi lần chỉnh sửa bài thì nó lại hư code
Cái này rất tuyệt :)
Mà sao tìm trên Menu ko thấy link để vào mục yêu cầu thủ thuật nhỉ ??
Nếu làm nhiều nút ẩn/hiện, thì mở " ẩn" này mà muốn nội dung ẩn khác bị ẩn lại thì làm sao vậy bạn? Mong bạn giúp đỡ :)
@MitU : theo như code trên thì các nội dung ẩn và hiện phải nằm chung trong 1 thẻ div, do đó 1 button chỉ có thể cho phép ẩn hiện 1 nội dung.
Nếu bạn muốn tạo nhiều button để ẩn hiện nội dung thì cứ copy đoạn code đó lên thôi.
MitU : Ý mình là khi mở một nội dung ẩn khác thì nội dung ẩn cũ tự động đóng lại á :S
@MitU : nếu theo cách này thì ko thể làm như bạn nói đc
Dũng cho anh hỏi là nếu mình thay cái nút bằng một dòng text thì code phải đổi như thế nào?
@Minh Triết : nếu anh muốn dùng dòng text thì anh phải chuyển thẻ <input> thành thẻ <a> mà khi chuyển như vậy hơi khó để chuyển chữ Xem thành Ẩn
Không cần đổi dòng text cũng được. Nhưng anh thử tìm cách đổi thẻ mà kg thàh công... Em hướng dẫn rõ thêm được kg? Tks :)
@Minh Triết : Em chỉ có thể sửa đc như thế này, anh tham khảo nha, chỉ cần nhấp vô dòng text là hiển thị, nhấp lại cái nữa là ẩn.
CODE:
<div>
<div>
<a href="#" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = '';}
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = '';}">Xem</a>
</div>
<div>
<div style="display: none;">
{Phan noi dung bi an}
</div>
</div>
</div>
Cảm ơn em rát nhiều ... anh sẽ thử... :)
Thích cái này quá , cảm ơn nhiều . Cho mình hỏi tiếp 1 chút nữa nhé. Mình thấy mấy cái web nước ngoài nó làm thế này ... Ví dụ như trong bài này phải có 1 dòng chữ đầu ví dụ như
BẠN MUỐN THAM GIA LÀM NGƯỜI MẪU ẢNH ?
rồi đến nút đọc tiếp . Vậy làm thế nào để như mấy cái web mình thấy là khi bấm và dòng chữ "
BẠN MUỐN THAM GIA LÀM NGƯỜI MẪU ẢNH ?" thì nó đã có thể cho mình đọc tiếp rồi hả PD ? Rồi nếu muốn đọc 1 tiêu đề khác thì cái trước đóng lại cho mình đọc cái sau ? PD thông cảm cho mình vì mới biết blog nên hay hỏi nhé và mong bạn có thể giúp .[Ý chính của mình là không muốn có nút "đọc tiếp" mà chỉ bấm vào tiêu đề thôi, bạn có bài viết nào như vậy không? Mình xem rồi mà tìm chưa ra bài đó] Chúc bạn luôn vui vẻ .
http://vavianshop.blogspot.com/
Mình có thử làm cái thủ thuật readmore của bạn trong trang này , cái sidebar bên phải , cái mà mình hỏi ở trên nó gần giống như cái này. Nhưng cái này là readmore và link đến bài viết . Mình ước gì có thể làm read more như trên để trả lời các câu hỏi về kiến thức nhiếp ảnh cho học trò thường hay hỏi nhanh hơn và gọn hơn. Giúp mình nhé , cảm ơn bạn nhiều lắm . Trong cái này phải chi mà khi bấm tiêu đề thì hiện hết bài viết rồi bấm cái khác nó tự đóng lại cái trước ...
@Jeffy : mình hiểu ý bạn rồi, như bạn nói thì nó giống như 1 kiểu hiệu ứng, chứ ko đơn thuần là đóng mở nữa. chắc phải dùng tới jQuery.
Thank nhiều, cái này rất hay :x
Hehe giờ tui mới phát hiện, thủ thuật này dùng trong IE thì ok, nhưng trong Chrome thì nút Xem mãi mãi là nút Xem, không chịu biến thành Ẩn ! Nhờ bạn Dũng kiểm tra lại xem có đúng như vậy không.
Sao em làm nó không hiển thị được anh dũng. và khi quay lại bài đăng thì code lại bị thay đổi vậy?
http://huynhtanngoc2.blogspot.com/#
Good post
Sao mình đưa phần Code đấy vào bài viết trên Forum thì nó vẫn hiện ra code, không tạo nút nhấn được. Bạn có thể hướng dẫn thêm được không!
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))
Mình chưa nghĩ ra là thủ thuật này dùng trong trường hợp nào,trong một bài viết tại sao lại phải cần ẩn một số nội dung để làm gì?Nếu được giải thích rõ hơn thì hay.Cảm ơn bạn.:(
@Minh Dung Pham: Nếu bài viết quá dài, ví dụ như nội dung ở các site truyện tranh, văn học...Chúng ta dùng code này để bài viết ngắn lại cho đẹp, bạn đọc muốn xem thì click vào để xem.
Hoặc phần nội dung cần ẩn là nội dung CẤM TRẺ EM (ảnh/ clip nóng), chúng ta sẽ cảnh báo trước, nếu bạn đọc muốn xem thì họ tự chịu trách nhiệm với việc click để hiển thị nội dung được ẩn.
Bạn có thể dùng nó cho các mục đích tương tự khác :)
mình muốn là nhiều button ẩn hiện kia theo hàng ngang thì làm thế nào bạn, các button đặt sát nhau nhé!
Xin cảm ơn!
» Nội dung phải liên quan tới chủ đề bài viết.
»
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.