Off Canvas and Table of Contents

[dlukefinch]

I would like to achieve an off canvas area which has a table of contents. The TOC should link (scroll) to areas of said page or off-canvas area. I’m not entirely sure how to set this up. Please watch the video below and advise me best you can. My site is currently on my mac so is not publicly available.

Video explanation: https://youtu.be/nBXsYkCYNaM

[Prasant]

Hello @dfinch,

Thanks for asking.

I am assuming that what you are looking for can be achieved using Table or content, tabs shortcodes depending on your preference. To open the section directly, you can add id name in URL. I am sharing links to shortcodes that you can refer:

http://demo.theme.co/integrity-1/shortcodes/table-of-contents/

http://demo.theme.co/integrity-1/shortcodes/tabbed-content/

Let me know if that answers your question.

Thanks.

[dlukefinch]

I’ve managed to get that far.

I have set an ID for the Off Canvas area but when using a URL such as http://localhost:8888/sw/#feed it’s not opening. The off canvas area I mean…

[nabeel]

Hi again,

Please follow this thread https://theme.co/apex/forums/topic/table-of-contents/#post-1357

Hope this helps!

[dlukefinch]

@Nabeel That’s not very helpful. I have already said that I understand the table of contents now.

My problem is getting it to work with an off canvas area. When I click on any of the TOC the off canvas areas closes instead of staying open and showing the correct content.

[dlukefinch]

I think you have missed the point, which maybe my fault in not explaining it properly.

As I understand it the TOC [toc_item title=”Page Two” page=”2″] will only link to posts on my site. This is not what I want.

I want to build EVERYTHING within the off canvas area. So, the TOC links to each section (within the off canvas area). For example;

TABLE OF CONTENT

1. Introduction (Scrolls down to Intro)
2. Gritting (Scrolls down to Gritting)
3. Travel (etc etc)

ALL on the canvas area i.e. the off canvas areas stays open.

[ruenel]

Hello There,

Thank you for the clarifications. Regretfully you cannot use [TOC] shortcode simply because table of contents works with pages and you are dealing with off canvas. An off canvas area is only good for menu and other content descriptions to display for your users. The table of contents will not work and will not even display correctly in the off canvas area. What I can suggest is to use the tabbed content instead.
http://demo.theme.co/integrity-1/shortcodes/tabbed-content/

You can easily link within the off canvas area when if you tabbed content. I have tested it and it works light what you want it. It just needs a little styling like removing the borders and alignment of the tab nav items. Maybe you can start setting it up in your site and we can style it later on.

Please let us know how it goes.