Chia sẻ code ẩn/hiện nội dung (Hide/Show Content) cực đẹp cho blogspot

Chia sẻ code ẩn/hiện nội dung (Hide/Show Content) cực đẹp cho blogspot

Chia sẻ code ẩn/hiện nội dung (Hide/Show Content) cực đẹp cho blogspot

Xem DEMO

1. Copy đoạn CSS này dán vào trong thẻ

/* Hide/Show Content CSS */
.identifier {}
.toggle-box {display: none;}
.toggle-box + label {cursor: pointer;display: block;font-weight: bold;line-height: 21px;margin-bottom: 1px;padding:3px 5px;color:#3B5998;background-color: #eee;}
.toggle-box + label + div {display: none;margin-bottom: 5px;}
.toggle-box:checked + label + div {display: block;}
.toggle-box + label:before {background-color: #4F5150;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;color: #FFFFFF;content: "+";display: block;float: right;font-weight: bold;height: 20px;line-height: 20px;margin-right: 5px;text-align: center;width: 20px;}
.toggle-box:checked + label:before {content: "\2212";}

2. Sau đó copy đoạn code này dán vào nội dung bài viết.

<input class="toggle-box" id="identifier-1" type="checkbox" >
<label for="identifier-1">Tiêu đề nội dung ẩn 1</label>
<div>Nội dung đang ẩn 1.</div>
<input class="toggle-box" id="identifier-2" type="checkbox" >
<label for="identifier-2">Tiêu đề nội dung ẩn 2</label>
<div>Nội dung đang ẩn 2.</div>
<input class="toggle-box" id="identifier-3" type="checkbox" >
<label for="identifier-3">Tiêu đề nội dung ẩn 3</label>
<div>Nội dung đang ẩn 3.</div>

Lưu ý: nội dung ẩn sẽ nằm trong đoạn thẻ <div>nội dụng</div>, để sử dụng được code này cần người có hiểu biết về html và css