Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Table of Contents not working in Blog Post

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
1361 104 144

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 or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!

View solution in original post

Replies 4 (4)

Sweet_Savior_3
Shopify Partner
1361 104 144

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 or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
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
1361 104 144

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 or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
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 🙂