2 cách tạo menu ẩn hiện cho bài viết

Sau đây web hay chia sẻ các bạn 2 cách ẩn hiện đơn giản dễ làm nhất nhé !

code tạo mục lục ẩn/hiện cho bài viết
code tạo mục lục ẩn/hiện cho bài viết


đầu tiên các bạn cần copy đoạn script sau vào trong html hoặc không cũng được. Nếu không copy các bạn cứ phang thẳng vào bài viết cũng được nhé.

Ưu điểm của 2 đoạn code này là các bạn không cần css nhé ! 

Phần nội dung chi tiết bài viết


1. Dạng mục lục/menu bài viết ẩn bên dưới

Code cho dạng mục lục menu bài viết hiện bên dưới như sau 
 
<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"> Ẩn/hiện mục lục xuống dưới  </button>
<br /> <div id="box01" style="display: none;"> Nội dung cần ẩn hiện các bạn viết trong này</div>


Và đây là kết quả 

 

2. Dạng mục lục/menu bài viết ẩn bên trên

Code cho dạng mục lục menu bài viết hiện bên trên như sau 
 
<div id="spoiler" style="display: none;">
Nội dung cần ẩn hiện các bạn viết trong này
</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') 
{document.getElementById('spoiler') 
.style.display=''}else{document.getElementById('spoiler') 
.style.display='none'}" title="Click to show/hide" type="button"> Ẩn/hiện mục lục lên trên</button></div>


Và đây là kết quả 




Chúc các bạn thành công ! cảm ơn các bạn đã quan tâm bài viết

Bình Luận Của Bạn

vungve.com không chấp nhận bình luận thiếu văn hóa

Mới hơn Cũ hơn