Show / Hidden Content - Các kiểu Ẩn hiện nội dung

Nếu như trước kia người ta muốn ẩn hiện nội dung để bài viết được gọn gàng thì hay dùng javaScript:

<script type="text/javascript">
function show_hide(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
<button onclick="show_hide('box01');"  type="button"> Tiêu đề  </button>
<br />
<div id="box01" style="display: none;"> Nội dung chi tiết </div>

Nội dung chi tiết

---

Một cách viết tương tự:

<script type="text/javascript">
//<![CDATA[
function hien() {
    document.getElementById('xem-tiep').style.display = 'inline';
    document.getElementById('thoi-xem').innerHTML = '<a href="javascript:an()">ẩn</a></span>';
}
function an() {
    document.getElementById('xem-tiep').style.display = 'none';
    document.getElementById('thoi-xem').innerHTML = '<a href="javascript:hien()">hiện</a>';
}
//]]>
</script>
<div>
Nội dung mặc định
<span id='xem-tiep' style='display: none;'>
Nội dung được tạm ẩn
</span>
<span id='thoi-xem'><a href="javascript:hien()">Xem nữa</a></span>
</div>

Nội dung mặc định Nội dung được tạm ẩn Xem nữa

---

Thì ngày nay chỉ với vài thẻ HTML5 chúng ta làm điều này rất tiện lợi:

<details>
<summary> Tóm tắt </summary>
Nội dung chi tiết
</details>

 Tóm tắt

Nội dung chi tiết

---

Tất nhiên nếu kèm theo js thì chúng ta sẽ có những hiệu ứng trượt ẩn hiện nội dung đẹp mắt hơn!