How to Create a Table of Contents - TOC Section with css ?

 

CSS Section:

<style>

body {

padding: 2em;

max-width: 600px;

margin: 0 auto;

}

.table_of_contents{float:left;padding:5px;margin:5px 10px 10px 0;background-color:#e6f4ea;font-weight:bold;width:50%;height:auto;}

.table_of_contents ol li{margin-left:18px}

.table_of_contents ol li:hover{margin-left:25px;transition:all 0.5s}

.table_of_contents span:after{content:'';display:inline-block;vertical-align:middle;height:0;width:0;margin:0 0 0 6px;border:4px solid transparent;border-top-color:#656565;}

.table_of_contents::-webkit-scrollbar{width:8px}

.table_of_contents::-webkit-scrollbar-thumb{border-radius:10px;background-color:#4f4f4f}

@media screen and (max-width:540px){

.table_of_contents{display:block;width:100%}

}

</style>

HTML Section:

<h1>Table Of Contents Widgets (T.O.C)</h1>

  <nav class="table_of_contents">

    <span>Table Of Content</span>

<ol>

  <li><a href="#section1">Toggle Section 1</a></li>

  <li><a href="#section2">Toggle Section 2</a></li>

  <li>Toggle <a href="#section3">Section 3</a></li>

  <li><a href="#more">Add More a Section</a></li>

  </ol>

</nav>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

  

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

  

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<h2 id="section1">This is section 1</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<h2 id="section2">This is section 2</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<h2 id="section3">This is section 3</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>