Thứ Tư, 28 tháng 11, 2018

Ẩn Hiện Nội Dung

Hôm nay Hùng Coder chia sẽ cho các bạn một thủ thuật mới mình vừa tìm được, cũng khá hay cho người dùng có nội dung bài viết quá dài và muốn ẩn nội dung dài dòng đó hoặc đoạn code :D


Qua hình ảnh bên trên các bạn cũng đã có thể nhận ra được thủ thuật này rồi chứ :D, thủ thuật này có 1 số forum cũng hay dùng như caulacbovb.net hay nhiều forum khác dùng cho mọi có những đống góp code hay mà không tạo trang quá dài :D, hoặc có bạn có thể xem DEMO ở phía bên dưới và nhận code ở phía dưới luôn nhé :)


Code
<div style="background-color: white; border: 1px solid #d8d8d8; font-size: 1em; padding: 3px;">
<div style="border-bottom: 1px solid #cccccc; display: block; font-size: 0.8em; font-weight: bold; margin-bottom: 3px; text-transform: uppercase;">
<span 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.innerHTML = '&lt;b&gt;Spoiler: &lt;/b&gt;&lt;a href=\'#\' onClick=\'return false;\'&gt;hide&lt;/a&gt;'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '&lt;b&gt;Spoiler: &lt;/b&gt;&lt;a href=\'#\' onClick=\'return false;\'&gt;show&lt;/a&gt;'; }"><b>Spoiler: </b><a href="https://draft.blogger.com/blogger.g?blogID=4903462421317886580#" onclick="return false;">show</a></span></div>
<div class="quotecontent">
<div style="display: none;">
Nội dung muốn ẩn hiện ở đây.
</div>
</div>
</div>

DEMO

Spoiler: show
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)
NỘI DUNG ĐƯỢC ẨN ĐẶT TẠI ĐÂY (HUNGCODER.COM)


Chúc các bạn thành công.

6 blogger-facebook

avatar

cái này áp dụng dô phần cmt được khoonganh nhỉ

avatar

A cũng không rỏ nữa e ạ :D, chắc được nhưng a k biết code và áp dụng vào thẻ gì thôi :D, nếu cứ pre thì ok luôn ;) cho cả bài viết nữa :D

avatar

Heehe áp dụng thử nếu thử luôn được cho thẻ pre trong bài viết như bt thì chia sẽ a với nhé :D tks e trc :)

avatar

làm giảm bớt nội dung trên bài viết nếu đoạn code đó quá dài e ạ :D


EmoticonEmoticon