Element 03: Manual Table of Content is Used to Insert A Table of Contents Manually

Anda bisa memilih untuk menggunakan ToC manual jika tidak ingin semua tag judul/heading(h1, h2, h3, h4, h5, h6) ditampilkan dalam Table of Contents.

Untuk penulisan manual anda harus menambahkan atribut id=' ... ' baru pada setiap tag heading yang ingin anda tambahkan ke daftar isi, mungkin sedikit sulit diterapkan tapi Anda bisa memilih Judul mana yang ingin ditampilkan.

Contents

1. Image with Caption
2. Manual Related Post
3. Post Break
4. Blockquote

1. Your_Heading
   1. Sub_Heading_1
   2. Sub_Heading_2
   3. Sub_Heading_3
   4. Sub_Heading_4

Penggunaan Table of Content manual lebih rumit dari pada versi otomatis, Anda harus menambahkan atribut ID berbeda di setiap tag heading dan menuliskannya dalam daftar konten.

Ini adalah contoh tag heading dengan ID khusus :

Before After

<h2>Your_Heading</h2>
<h3>Sub_Heading_1</h3>

<h2 id='heading'>Your_Heading</h2>
<h3 id='subHeading>Sub_Heading_1</h3>

Penulisan daftar konten yang benar

<details class="sp toc" open="">
  <summary data-hide="Hide all" data-show="Show all">Contents</summary>  
  <div class="toC">
    <ol>
      <li><a href="#Image_with_Caption">Image with Caption</a></li>
      <li><a href="#Manual_Related_Post">Manual Related Post</a></li>
      <li><a href="#Post_Break">Post Break</a></li>
      <li><a href="#Blockquote">Blockquote</a></li>
      
    </ol>

    <!--[ Sample ToC with subheading ]-->
    <ol>
      <li><a href="#heading">Heading Title</a>
        <ol>
          <li><a href="#subHeading">Sub_Heading_1</a></li>
          <li><a href="#subHeading">Sub_Heading_2</a></li>
          <li><a href="#subHeading">Sub_Heading_3</a></li>
          <li><a href="#subHeading">Sub_Heading_4</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>

Hapus atribut open=' ' untuk menutup otomatis Table of Content ketika laman pertama kali dimuat.

Anda bisa mengganti judul atau kalimat 'Show all/Hide all' pada bagian yang sudah ditandai.