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: January 20, 2024
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",
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...