Dynamic Table of Contents with jQuery

January 04, 2020 No comments Bootstrap4 Table Dynamic jQuery

1. Introduction

Dynamic Table of Contents (jquery-dynamic-content-menu) is a jQuery plugin written for Boostrap 4 framework. The plugin creates content menu in the sidebar (on the fly) with headings taken from articles on the page. Clicking the item will smoothly scroll focus to that specific section with a chosen heading. The plugin is fully customizable, it can be easily adapt to your needs.

Jquery dynamic content menu

2. Plugin Overview

Library jquery-dynamic-content-menu
Author Sergio
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1 or Latest version and Bootstrap 4.1.3

Demo

3. How to install jquery-dynamic-content-menu plugin

Follow below steps to install dynamic content menu plugin.

1. first load the Bootstrap and jQuery in your HTML document

<!-- 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. second, include jquery-dynamic-content-menu plugin CSS and JavaScript files

<head>
    <link rel="stylesheet" href="css/jquery-dynamic-content-menu.css">
</head>
<body>
    <script src="js/jquery-dynamic-content-menu.js"></script>
</body>

3. the last step is to place jquery-dynamic-content-menu plugin initialization script before body close tag

<script>     
$(function() {
    //Include plugin
    $("#dinamicMenu").dynamicContentMenu({
        // 'theme' : "material",
        'selectors' : "h1, h2, h3, .h1s",
        'extendPage': false // do not increase page height
    });
});
</script>

Plugin will process every h1 element and put it into the sidebar content menu. Content on the page can look like the following:

<div class="col-sm-8">
    <article>
        <h1> First article </h1>
        <p> Some contents...</p>
    </article>
    .
    .
    .
    <article>
        <h2> Second article </h2>
        <p> Some contents...</p>
    </article>
    .
    .
    .
    <article>
        <h2> Third article </h2>
        <p> Some contents...</p>
    </article>    
</div>
<div class="col-sm-4"> <!-- side bar --->
    <div id="dinamicMenu"></div>
</div>

4. Conclusion

In this article, we showcased a dynamic table of contents plugin written in jQuery. Fully automatic, easy to customize and integrate with any website. With this plugin, you don't have to remember to update the content menu links everytime you change headings in your document.

{{ message }}

{{ 'Comments are closed.' | trans }}