Table of Contents not working in Blog Post

[Andrew_Wildman]

Hello world!

I'm working on a long-form blog post. I've included a table of contents at the top. 

Blog post here: https://adventureandy.com/blogs/news/boot-lace-buyers-guide

The table of contents is a list with the following layout:

<div id="toc_container">
<h2 class="toc_title">Contents</h2>
<ul class="toc_list">
<li><a href="#1_0">1. Introduction</a></li>
<li><a href="#2_0">2. The Best Boot Lace Materials</a></li>
</ul>
</div>

Each heading in the blog post body is labelled as follows:

<h2 id="1_0">1. Introduction</h2>

The table of contents works perfectly in CodePen. Everything links as it should. However, in my Shopify blog post the links don't work. Any help would be greatly appreciated. 

[Sweet_Savior_3]

Hello @Andrew_Wildman 

Can you please remove <ul>, <li> tags from the list of table of contents and directly use the <a href .... /> and try.

like this:

Thanks

[Andrew_Wildman]

Hello @Sweet_Savior_3 ,

Thanks for the suggestion, I've implemented it exactly as you suggested, with some <br> tags to separate each line. Still this isn't working. Could it be something about the styling of my container?

<div id="toc_container">
<h2 class="toc_title">Contents</h2>
<br><a href="#1_0">1. Introduction</a>
<br><a href="#2_0">2. The Best Boot Lace Materials</a>
<br><a href="#2_1">2.1 Leather Boot Laces</a>
</div>

.css for #toc_container:

#toc_container {
  background: #fafafa none repeat scroll 0 0;
  border: 1px none #aaa;
  display: table;
  margin-bottom: 1em;
  padding: 20px;
  width: 100%;
}

Thanks for the help,

Andrew

[Sweet_Savior_3 · Accepted solution]

It is not working because there is some theme default scripts which are triggered on the <a> tag click >>

If you have JS knowledge you can alter the code or you can seek developer help at a reasonable rate because the code needs tweak to work as per your requirement.

Thanks

[Andrew_Wildman]

Thanks a lot. I put this JS into the site for our free-shipping modals months ago!

That's what happens when you let the janitor write the JS. 

I'll fix it now. Appreciate the help 🙂