Sidebar Table Of Contents Generator with jQuery and Bootstrap - Bootstrap Toc

Sidebar Table Of Contents Generator with jQuery and Bootstrap - Bootstrap Toc
File Size: 54.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A lightweight jQuery & Bootstrap 3/4 plugin used to generate a sticky, collapsible table of contents from heading tags within the document. Just like the sidebar content navigation as you seen on Bootstrap documentation website. 

How to use it:

1. Load the bootstrap-toc.css stylesheet in the head and the bootstrap-toc.js script at the end of the document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link href="bootstrap-toc.css" rel="stylesheet">
  ...
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="bootstrap-toc.js"></script>

2. Create an empty nav element for the table of contents.

<nav id="toc" data-spy="affix" data-toggle="toc"></nav>

3. Add the following data attributes to body tag for scrollspy support.

<body data-spy="scroll" data-target="#toc">

4. That's it. The plugin will automatically generate a table of contents inside the nav element. You can also initialize the plugin via JavaScript as follow.

$(function() {
  var $myToc = $('...');
  Toc.init($myToc);
  $('body').scrollspy({
    target: $myNav
  });
});

5. Specify the element where the search for headings will be limited to

Toc.init({

  // The element that the navigation will be created in
  $nav: $('#myToc'),

  // The element where the search for headings will be limited to
  $scope: $(document.body)
  
});

Changelog:

v1.0.0 (2018-07-27)

  • fix sticky navigation vertical positioning

2015-12-13

  • move layout positioning to be site-specific
  • fix ScrollSpy

2015-12-13

  • ensure that the data attribute is in place for styling

This awesome jQuery plugin is developed by afeld. For more Advanced Usages, please check the demo page or visit the official website.