Table of contents

The Table of contents plugin presents a list of links to sections in the current article. A section is defined as content beneath a heading with an ID.

 

<section class="js-table-of-contents" data-list-type="ol" ></section>

If a template is included within the plugin element, it will be used to render the component.

<section class="js-table-of-contents">
  <script class="js-template" type="text/html">
    <% if (headers.length) { %>
      <h3>In this article</h3>
      <ul class="list">
        <% _.each(headers, function(header) { %>
          <li>
            <a href="#<%= header.id %>"><%- header.text %></a>
          </li>
        <% }); %>
      </ul>
    <% } %>
  </script>
</section>

First heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra quam ut tortor convallis, a maximus turpis finibus. Donec pretium gravida urna, a lobortis est porttitor a. Sed vestibulum urna ac lacinia condimentum. Praesent tempor vel urna ut consectetur. Donec imperdiet at risus eu consequat. Phasellus semper porta magna vitae auctor. Duis vitae convallis erat.

First subheading

Sit amet elit hendrerit, vehicula lacus non, pretium nunc. Duis egestas dui at augue malesuada dignissim. Donec et urna felis. Phasellus malesuada venenatis hendrerit. Vivamus vitae lorem tellus. Suspendisse congue fringilla dolor non suscipit. Vestibulum tempor ut nulla in imperdiet. Vestibulum ornare urna metus, ut vehicula leo sodales sagittis. Mauris in gravida felis, at feugiat nibh.

Second subheading

Etiam sit amet lacus nunc. Donec dui lorem, laoreet a dui at, congue vestibulum sapien. Donec semper, augue sit amet dignissim rhoncus, leo dui elementum dolor, nec feugiat eros mi cursus mi. Aliquam erat volutpat. Etiam vehicula nibh vitae sem euismod mollis. Nulla eu vehicula orci. Ut et fringilla magna.

Second heading

Aliquam lacinia nibh non lobortis tempus. Phasellus tincidunt, purus eget accumsan finibus, nisi leo ultricies odio, condimentum eleifend nisl ipsum eu enim. Proin ipsum felis, gravida id tortor ut, rutrum varius justo. Phasellus blandit maximus augue nec consequat. Etiam ultrices risus sed rhoncus interdum. Vivamus condimentum aliquam justo in luctus. Morbi dictum libero a elit viverra rutrum.

Third subheading

Nam faucibus magna vel lacus placerat vestibulum eget vel ipsum. Suspendisse rhoncus mauris non ullamcorper viverra. Donec mi neque, maximus vel metus nec, auctor sollicitudin augue. Etiam consectetur, augue sed ornare cursus, mi neque vehicula eros.

Third heading

Fusce dignissim convallis diam, nec finibus erat volutpat vitae. Nunc in dolor commodo, dictum orci id, fringilla tellus. Pellentesque faucibus eros turpis, nec lacinia quam cursus mollis. Suspendisse pellentesque mauris sit amet commodo venenatis. Quisque auctor, quam quis dictum dictum, massa massa cursus mi, eu tempor dolor libero et magna. Quisque efficitur urna eu aliquam scelerisque. Sed lacus lorem, lacinia non volutpat eu, feugiat ac mi.

Fourth heading

Phasellus placerat turpis lectus, vitae viverra nisi luctus ac. Quisque viverra ligula vel libero mollis, sit amet imperdiet tellus faucibus. Morbi cursus vestibulum feugiat. Mauris gravida pulvinar odio a facilisis. Ut placerat libero felis, nec consectetur metus suscipit vulputate. Etiam ornare egestas rhoncus. In nec sagittis leo.

$('.js-table-of-contents').tableOfContents({
  selector: ':header',
  track: false,
  listType: 'ul',
  classNames: {
    list: 'list',
    listItem: null,
    link: null
  }
});