Bootstrap 4 Dynamic Table of Contents with jQuery

A multi feature jQuery plugin for Bootstrap 4 to generate table of contents dynamically. The plugin get headings from article and make a beautiful content menu in sidebar. When user clicks a specific heading from TOC then content page smoothly scroll to that heading’s section.

Moreover, you can fully customize content menu with its available options & with additional CSS according to your needs.

Plugin Overview

Plugin: jquery-dynamic-content-menu
Author: Sergio
Licence: MIT Licence
Published: July 26, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 14.5 KB

How to Use Bootstrap Table of Contents

1.Load the Bootstrap and jQuery in your HTML document to getting started with dynamic table of contents.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

2. Also include plugin’s assets that will generate table of contents.

<!-- Dynamic TOC Assets -->
<link rel="stylesheet" href="css/jquery-dynamic-content-menu.css">
<script src="js/jquery-dynamic-content-menu.js"></script>

3. After that, create some paragraph with headings.

<h1> First heading </h1>
<p> Some contents...</p>
.
.
.
<h2> Second heading </h2>
<p> Some contents...</p>
.
.
.
<h2> Third heading </h2>
<p> Some contents...</p>

4. Create a div element with a unique id in which TOC will be generated.

<!-- Side -->
<div class="col-md-4">
    <!-- Plugin menu in this place -->
    <div id="dinamicMenu"></div>
</div>

5. Finally, initialize the plugin in jQuery document ready function to active bootstrap 4 table of contents.

$(document).ready(function(){

   $("#dinamicMenu").dynamicContentMenu({
                    'selectors' : "h1, h2",
   });

});

Advance Configuration Options for Bootstrap Table of Contents

The following are some advance configuration options to create / customize “dynamic table of contents”.

Option Description, Default, Type
theme

Define the theme for TOC. Default: “material”, Type: String.
Available Options: “bootstrap”, “jqueryui”, or “none”.

$("#dinamicMenu").dynamicContentMenu({
   theme:  "material",
});
selectors

This option selects headings to be shown in TOC. Defaullt: “h1, h2, h3”, Type: String | Object.

$("#dinamicMenu").dynamicContentMenu({
   selectors: "h1, h2, h3",
});
extendPage

Decide weather to extend page or not. Default: true, Type: Boolean.

$("#dinamicMenu").dynamicContentMenu({
   extendPage: false,
});
smoothScroll

Decide weather to scroll smoothly to sections or not. Default: true, Type: Boolean.

$("#dinamicMenu").dynamicContentMenu({
    smoothScroll: false,
});
scrollHistory

Adds a hash to the page url, to maintain history, when scrolling to a DynamicContentMenu item. Default: false, Type: Boolean.

$("#dinamicMenu").dynamicContentMenu({
   scrollHistory: true,
});
smoothScrollSpeed

Define the scrolling speed. Default: “medium”, Type: String.
Available Options: “slow”, “medium”, or “fast”.

$("#dinamicMenu").dynamicContentMenu({
   smoothScrollSpeed: "medium",
});
hideEffect

CSS animation for hiding sub headings on scroll. Default: “slideUp”, Type: String.
Available Options: “none”, “fadeOut”, “hide”, or “slideUp”.

$("#dinamicMenu").dynamicContentMenu({
   hideEffect: "slideUp",
});