Create an automatic Table of Content (TOC) in Blogger Blog

Ever went through long articles and wished 🤔 there was an option to jump through? 

Or return to previous sections?

Want to provide that experience 🧪 to your readers?

I will show you a trick that automatically displays table of content in your blogger blog. 

Yes, you heard it right, automatic generation of TOC. 🤩

You do not need to add any code while writing your content. This script will auto add IDs (if not present) in your heading tags and displays TOC at the top of article. 

What is Table of Content (TOC)?

TOC is a simple jump link that enables users to jump within the article. It displays all heading tags and readers can navigate to sections they want to read. 

Why automatic table of Contents for your blogger?

The reason is simple - no manual coding. Manually adding ids in heading and inserting table of contents code in every article is exhausting and time consuming.

Anyways, I will mention some extra benefits of using this auto toc script for blogger.

• SEO friendly - Google loves when article is divided into sections.
• Auto insert table of content at the top of every article.
• No headache of adding IDs to heading tags - this script auto adds IDs if not present.
• Does not show up for small articles with less than 2 headings. Lets be honest, it makes no sense to display table of content in small articles.
• No external dependencies. 
• Very easy to install.
• And many more...

Adding TOC in Blogger blog

I told you earlier, its very simple to install. Add this javascript code before closing body tag and it automatically appends TOC at the top of article. No need to do anything. Yes, of course, you can style your TOC with CSS.

<script>/*<![CDATA[*/
// Automatic TOC code shared by TwistBlogg.com
// Do not share without permission and keep credit intact.
const tocContainer = document.querySelector(".post-body");
const headings = tocContainer.querySelectorAll("h2, h3, h4, h5, h6");

// Checking if there are more than 2 headings
if (headings.length > 2) {
	const details = document.createElement("details");
	details.setAttribute("class", "toc-content");
	const summary = document.createElement("summary");
	summary.innerHTML = "<strong>Table of Contents</strong>";
	details.append(summary);

	headings.forEach((el) => {
  // Generate IDs if they don't exist - optional
		el.id = el.id || el.textContent.toLocaleLowerCase().replace(/\W/g, "-");
		const p = document.createElement("p");
  // Add a class to the p tag with the heading like "toc-h2"
		p.setAttribute("class", "toc-" + el.tagName.toLocaleLowerCase());
		const a = document.createElement("a");
  // Add a link to the section in the text
		a.setAttribute("class", "toc-link");
		a.textContent = el.textContent;
		a.href = "#" + el.id;
		p.append(a);
		details.append(p);
	});
 // Add TOC to the beginning of the article
	tocContainer.prepend(details);
}
/*]]>*/</script> 

If you want to know how this code works, check further in this article.

Styling Automatic Table of Content for Blogger blog

This is very plain CSS code that does the work. Customize the classes accordingly. 

And please let me know if you want a more sophisticated design, I can create something amazing.

/* Reduce the size and line-height of the TOC */
.toc-content {
  font-size: 1em;
  line-height: 1.1;
  cursor: pointer;
}

.toc-content a {
  text-decoration: none;
}

.toc-content a:hover{
  text-decoration: none;
}

/* Indent headings based on their level */
.toc-h3 {
  padding-left: 1em;
}
.toc-h4 {
  padding-left: 2em;
}
.toc-h5 {
  padding-left: 3em;
}
.toc-h5 {
  padding-left: 4em;
}

Understanding how our auto Table of Content works

If you are a geek and wants to know how the code works, here it is.

This code selects .post-body class and finds all heading tags.

const tocContainer = document.querySelector(".post-body");
const headings = tocContainer.querySelectorAll("h2, h3, h4, h5, h6");

Our headings variable now holds all heading tags. Checking if there are more than 2 headings, if yes, run the script.

if (headings.length > 2) {
    // Create table of contents
}

Let's create a toggle button. We create a <details> tag element and insert classes. That way we can use browser native support for dropdown toggle button. The <details> element includes a <summary> tag where you can insert the text that displays even when the toggle is closed. In our case, it is 'Table of Contents'. We are doing so as to hide TOC until it's wanted.

const details = document.createElement('details');
details.setAttribute('class', 'toc-content'); 
const summary = document.createElement('summary');
summary.innerHTML = '<strong>Table of Contents</strong>';
details.append(summary);

Generate IDs if they don't exist. IDs are important for table of content to navigate through so we check if your heading tags have IDs, if not we use regex to auto generate ids and append them to our heading tags.

headings.forEach((el) => {
	// Generate IDs if they don't exist
    el.id = el.id || el.textContent.toLocaleLowerCase().replace(/\W/g,"-");
    
    // Rest of the loop
}

Settings classes and links in p and a tags.

const p = document.createElement("p");

    // Add a class to the p tag with the heading like "toc-h2"
    p.setAttribute("class", "toc-" + el.tagName.toLocaleLowerCase());
    const a = document.createElement("a");
    a.setAttribute("class", "toc-link");
    a.textContent = el.textContent;

    // Add a link to the section in the text
    a.href = "#" + el.id;
    p.append(a);
    details.append(p);

Insert TOC at the beginning of the article.

articleContainer.prepend(details);

That is all. We successfully created auto generating table of contents(TOC) for our blogger blog. I hope you were able to install it in your site. Do leave a comment if you want customized TOC. Happy Blogging. 😀💪

Hey, got a minute?

Here are some handpicked articles for your to read next.

• Add beautiful Our Services layout to your blog
• Create professional hero footer to your blog
• Add Super LightWeight Syntax Highlighter Plugin In Blogger 
• Stylish CSS Demo and Download Buttons for Blogger