TABLE OF CONTENTS CODE

Got it! Here’s the updated version where the Table of Contents title dynamically switches between 📚 Table of Contents ▼ (closed) and 📚 Table of Contents ▲ (open).

📌 Step 1: Add This CSS for Stylish TOC

Paste this inside Theme > Edit HTML, just before </head>:

html
<style>
/* Stylish Table of Contents */
.toc-container {
    background: #fff;
    border: 3px solid #007bff;
    border-left: 7px solid #007bff;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}
.toc-title {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background: #007bff;
    padding: 10px;
    text-align: center;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}
.toc-title:hover {
    background: #0056b3;
}
.toc-list {
    list-style: none;
    padding: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.3s ease-in-out;
}
.toc-list li {
    margin-bottom: 8px;
    font-size: 16px;
    padding-left: 5px;
}
.toc-list a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    display: flex;
    align-items: center;
    transition: color 0.3s ease-in-out;
}
.toc-list a:hover {
    color: #ff4500;
}
.toc-list a::before {
    content: "📖";
    margin-right: 8px;
    transition: transform 0.3s ease-in-out;
}
.toc-list a:hover::before {
    transform: rotate(15deg);
}
.toc-container.expanded .toc-list {
    max-height: 500px;
    padding: 10px;
}
</style>

📌 Step 2: Add JavaScript for Dynamic TOC

Paste this before </body> inside Theme > Edit HTML:

html
<script>
document.addEventListener("DOMContentLoaded", function () {
    var postContent = document.querySelector(".post-body");
    if (!postContent) return;

    var headings = postContent.querySelectorAll("h2, h3, h4");
    if (headings.length === 0) return;

    var tocContainer = document.createElement("div");
    tocContainer.classList.add("toc-container");

    var tocTitle = document.createElement("div");
    tocTitle.classList.add("toc-title");
    tocTitle.innerHTML = "📚 Table of Contents &#9660;"; // ▼ Closed state
    tocContainer.appendChild(tocTitle);

    var tocList = document.createElement("ul");
    tocList.classList.add("toc-list");

    headings.forEach(function (heading, index) {
        var id = "toc-" + index;
        heading.id = id;

        var listItem = document.createElement("li");
        var link = document.createElement("a");
        link.href = "#" + id;
        link.innerText = heading.innerText;

        listItem.appendChild(link);
        tocList.appendChild(listItem);
    });

    tocContainer.appendChild(tocList);

    var firstHeading = headings[0];
    firstHeading.parentNode.insertBefore(tocContainer, firstHeading);

    // Toggle TOC Open/Close
    tocTitle.addEventListener("click", function () {
        tocContainer.classList.toggle("expanded");
        tocTitle.innerHTML = tocContainer.classList.contains("expanded")
            ? "📚 Table of Contents &#9650;" // ▲ Open state
            : "📚 Table of Contents &#9660;"; // ▼ Closed state
    });
});
</script>

📌 Step 3: Add TOC Placeholder in Blog Post

In Blogger Post Editor, switch to HTML mode and paste this where you want the TOC:

html
<div class="toc-container"></div>

🎯 Features of This TOC

✔ Collapsible – Click to expand or collapse the TOC.
✔ Smooth Scrolling – Clicking TOC links smoothly scrolls to the section.
✔ Modern Icons – Uses ▼ (closed) and ▲ (open) symbols dynamically.
✔ Beautiful Animations – Hover effects, transitions, and color changes.
✔ Mobile-Friendly & Lightweight – Works perfectly on all devices.

🚀 Final Steps

Save & Preview your blog post.
The TOC will automatically generate based on <h2>, <h3>, <h4>.
Click on the TOC title to expand/collapse it.

🎉 Now your Blogger Table of Contents is more stylish & dynamic! 🚀 Let me know if you need more customizations. 😊

shyamprasadam2pm