Creating a Responsive Table of Contents using HTML, CSS, and JavaScript

A table of contents, also known as a TOC, is a navigation tool used to help readers find specific sections of an article or document. This tool is especially useful for long-form content where users might find it hard to find what they're looking for. In this blog post, we’ll discuss how to create a responsive table of contents using HTML, CSS, and JavaScript.

HTML

The first step to creating a table of contents is to create the HTML structure. We'll start by creating a container for our table of contents and then we'll define the headings and subheadings within our article.

<div id="toc-container">
  <h2>Table of Contents</h2>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</div>

<h2 id="section1">Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in ipsum vel libero tempor venenatis vel vel justo. Nunc auctor malesuada tristique.</p>

<h2 id="section2">Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in ipsum vel libero tempor venenatis vel vel justo. Nunc auctor malesuada tristique.</p>

<h2 id="section3">Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in ipsum vel libero tempor venenatis vel vel justo. Nunc auctor malesuada tristique.</p>

CSS

Now that we have our HTML structure in place, let's add some styles to our table of contents.

#toc-container {
  background-color: #f2f2f2;
  padding: 20px;
}

#toc-container h2 {
  margin-top: 0;
}

#toc-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#toc-container li {
  margin-bottom: 10px;
}

#toc-container a {
  color: #333;
  text-decoration: none;
}

#toc-container a:hover {
  color: #fff;
  background-color: #333;
  padding: 5px;
  border-radius: 5px;
}

JavaScript

Finally, we'll add some JavaScript to our table of contents to make it more dynamic and responsive. We'll use JavaScript to track the user's position on the page and highlight the corresponding section in the table of contents.

// Get the container element
var tocContainer = document.getElementById("toc-container");

// Get all the headings in the article
var headings = document.querySelectorAll("h2");

// Get the distance from the top of the page for each heading
var headingPositions = [];
for (var i = 0; i < headings.length; i++) {
  headingPositions.push(headings[i].offsetTop);
}

// Listen for scroll events
document.addEventListener("scroll", function() {
  // Get the current scroll position
  var scrollPos = document.documentElement.scrollTop || document.body.scrollTop;

  // Find the nearest heading to the current scroll position
  var closestHeading = 0;
  for (var i = 0; i < headingPositions.length; i++) {
    if (Math.abs(headingPositions[i] - scrollPos) < Math.abs(headingPositions[closestHeading] - scrollPos)) {
      closestHeading = i;
    }
  }

  // Highlight the corresponding section in the table of contents
  var tocLinks = tocContainer.querySelectorAll("a");
  for (var i = 0; i < tocLinks.length; i++) {
    tocLinks[i].style.backgroundColor = "";
  }
  tocLinks[closestHeading].style.backgroundColor = "#333";
  tocLinks[closestHeading].style.color = "#fff";
});

That's it! With these HTML, CSS, and JavaScript snippets, you now have a responsive table of contents that helps users navigate your article or document more easily. You can also add more styles and functionality to the table of contents as needed to make it fit your specific use case.