Docs

[juanajaafar]

Hi. I’m trying to add a Table of Content to my page:

1) It automatically sets to align left. I’d like it to be full width. How do I do this?

2) I would like the links on the Table of Content to direct readers to sections within the same page. How do I do this?

[John Ezra]

Hi there,

Thanks for writing in! To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything. Thanks!

[juanajaafar]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information.

1] To make your table of contents as fullwidth, please change the type from left to block.

[toc title="Table of Contents" type="block"] [toc_item title="1. Introduction" page="1"] [toc_item title="2. More Information" page="2"] [toc_item title="3. Even More Information" page="3"] [/toc]

2] To direct your readers to a section of the page, you must first setup an ID for each of your section. For example, you have a section with an id="my-section", you can use the ID and create a link href set to like this: <a href="#my-section">Link Text</a>

For further information on how you can use the table of contents shortcode, please check it here: http://demo.theme.co/integrity-1/shortcodes/table-of-contents/

[juanajaafar]

Hi. Thanx. I’ve tried it. But:

1) When I click in the Table of content, it doesn’t direct me to the particular content

2) I don’t know what Class and Style are.

[Rue Nel]

Hello There,

I went ahead and checked again your page. Table of Contents can only be used in your paged content. This will not work out and will not be applicable if you just link to a section within your page. What you are trying to do is something more like one page navigation.

I went ahead and created a custom html code instead to replicate the table of contents block. And then I made some link to it. This is the code:

<div class="x-toc block">
  <h4 class="h-toc">Table of Contents</h4>
  <ul class="unstyled cf">
    <li class="x-toc-item"><a href="#" title="Go to 1. Introduction">1. Introduction</a></li>
    <li class="x-toc-item"><a href="#English">2. Young Women's Caucus at the 
Asia Pacific Civil Society Forum on Beijing+20</a></li>
    <li class="x-toc-item"><a href="#Bahasa-Melayu">3. Kokus Anak Muda Wanita di 
Forum Masyarakat Sivil 
Asia Pasifik berkenaan Beijing+20</a></li>
  </ul>
</div>

Please noticed that when you click on the link, it will scroll down to the section. This was made possible because I added an ID in the row settings (http://prntscr.com/boiwn0). Please check out your page now.

[juanajaafar]

This is perfect! Thank you!

[Christian]

You’re welcome. Glad we could help. 🙂

[Author]

Posts