Tạo mục lục tự động ẩn hiện cho bài viết (Create Automatic Table Of Contents)

Để tạo mục lục tự động xuất hiện các tiêu đề giống như word trong blog ta thực hiện như sau:
Bước 1. Copy đoạn code sau đặt trước thẻ ]]></b:skin> và lưu lại kiểm tra có bị lỗi hay không. Chắc chắn đoạn code mình đưa sẽ ok vì đã test rồi.

/* TOC */

.table-of-contents{border:3px solid #0B610B;flex:auto;width:fit-content;background:#eee;font-size:18px;padding:11px;margin:8px 0 30px 0}

.table-of-contents li{margin:0 0 0.25em 0}

.table-of-contents a{color: #0B610B;font-family: 'Oswald';

  font-style: normal;

  font-weight: 400;

  src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUliZTaR.woff2) format('woff2');

  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;}

.table-of-contents h4{margin:0;cursor:pointer}

.table-of-contents h4:after{font-family:FontAwesome;content:"\f0c9";padding-left:7px;}

Bước 2. Sau khi xong bước 1 các bạn tiếp tục copy đoạn code sau đặt trước thẻ </body>

<script async='async' defer='defer'>

/* Made by MFK bloginos.com */

var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}

</script>

Bước 3. Sau đó bạn đến bài đăng của mình trong chế độ HTML và dán đoạn code trước thẻ <h2> hoặc bất kì vị trí nào mà không có khoảng trắng:

<div class='toc-pro'></div>

Vi du:

<div class='toc-pro'>

<h2 style="text-align: left;">

1. Tin học là gì?

</div>

kết quả: