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

Domo

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