Cách tạo mục lục cho bài viết Blogspot

CSS code

  #toc_container{background: #f9f9f9;border: 1px solid #aaa;padding: 0 10px;margin-bottom: 1em;font-size:95%;}p.toc_title,ul.toc_list {margin: 5px;padding-left: 0;}.toc_list li {list-style: none;margin-top: 0px; margin: 0!important;}#toc_container a {text-decoration: none;text-shadow: none;color: black;font-weight: 400;}#toc_container a:hover {color: #E9573F;text-decoration: underline;}span.accordion{cursor: pointer;}div.panel {padding: 0 18px;max-height: 0;overflow: hidden;opacity: 0;}div.panel.show {opacity: 1;max-height:500px;}

Javascript Code

<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

HTML code

,,,,,
<h3>Phần 1: abc</h3>
Nội dung phần 1
<h3>Phần 2: xyz</h3>
Nội dung phần 2
......

,,,,,
<h3 id="phan-1">Phần 1: abc</h3>
Nội dung phần 1
<h3 id="phan-2">Phần 2: xyz</h3>
Nội dung phần 2
......

<div id="toc_container">
Nội dung chính <span class="accordion active">[Ẩn/Hiện]</span>
<div class="panel show">
<ul class="toc_list">
<li><a href="#phan-1">Phần 1: abc</a></li>
<li><a href="#phan-2">Phần 2: xyz</a></li>
</ul>
</div>
</div>