Solved

Table of Contents not working in Blog Post

Andrew_Wildman
Tourist
9 0 1

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. 

Accepted Solution (1)
Sweet_Savior_3
Shopify Partner
1040 82 93

This is an accepted solution.

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

Sweet_Savior_3_0-1708013160860.png

 

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

Don't forget to like and accept the solution to help others store owners.
Looking for an expert for your store ? Hire Me
Have any queries ? Send Here
From Less To Further !!!

View solution in original post

Replies 4 (4)

Sweet_Savior_3
Shopify Partner
1040 82 93

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:

Sweet_Savior_3_0-1707926330525.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert for your store ? Hire Me
Have any queries ? Send Here
From Less To Further !!!
Andrew_Wildman
Tourist
9 0 1

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
Shopify Partner
1040 82 93

This is an accepted solution.

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

Sweet_Savior_3_0-1708013160860.png

 

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

Don't forget to like and accept the solution to help others store owners.
Looking for an expert for your store ? Hire Me
Have any queries ? Send Here
From Less To Further !!!
Andrew_Wildman
Tourist
9 0 1

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 🙂