Auto Expanding Table Of Contents Plugin - Dynamic Content Menu

The Dynamic Content Menu jQuery plugin automatically generates a collapsible and expandable table of contents using nested HTML lists.

More features:

• Smoothly scroll the page to specific content sections.
• Auto show/hide nested TOC items on page scroll.
• Highlight active TOC items on page scroll.
• Auto adjust the page height if a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item.
• Auto add a hash to the page url to maintain history.

How to use it:

1. Add references to jQuery library and the Dynamic Content Menu plugin's files.

<link rel="stylesheet" href="/path/to/jquery-dynamic-content-menu.css" />
<script src="/path/to//jquery.min.js"></script>
<script src="/path/to/jquery-dynamic-content-menu.js"></script>

2. Create a container element to hold the table of contents.

<div id="dynamicMenu"></div>

3. Calling the plugin on the container element will generate a nested table of contents from heading elements (h1, h2, h3) found in the document.

$(function(){
  $("#dynamicMenu").dynamicContentMenu();
});

4. Customize the container element that holds all of the heading elements used to generate the table of contents. Default: body.

$("#dynamicMenu").dynamicContentMenu({
  context: "#container"
});

5. Customize the heading elements used to generate the table of contents. The order is very important since it will determine the table of content's nesting structure. Default: 'h1,h2,h3'.

$("#dynamicMenu").dynamicContentMenu({
  selectors: "h2, h3, h4, h5, h6"
});

6. Customize the container element to ignore. Default: null.

$("#dynamicMenu").dynamicContentMenu({
  ignoreSelector: ".ignore"
});

7. Customize the smooth scroll functionality.

$("#dynamicMenu").dynamicContentMenu({
  // Accepts a boolean: true or false
  // Determines if a jQuery animation should be used to scroll to specific table of contents items on the page
  smoothScroll: true,

  // Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
  // The time duration of the smoothScroll animation
  smoothScrollSpeed: "medium",

  // Accepts Number (pixels)
  // The amount of space between the top of page and the selected table of contents item after the page has been scrolled
  scrollTo: 0
});

8. Customize the auto show/hide functionality.

$("#dynamicMenu").dynamicContentMenu({
  // Accepts a boolean: true or false
  // Used to determine if elements should be shown and hidden
  showAndHide: true,

  // Accepts String: "none", "fadeIn", "show", or "slideDown"
  // Used to display any of the table of contents nested items
  showEffect: "slideDown",

  // Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
  // The time duration of the show animation
  showEffectSpeed: "medium",

  // Accepts String: "none", "fadeOut", "hide", or "slideUp"
  // Used to hide any of the table of contents nested items
  hideEffect: "slideUp",

  // Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
  // The time duration of the hide animation
  hideEffectSpeed: "medium",

  // Accepts a boolean: true or false
  // Determines if table of contents nested items should be shown and hidden while scrolling
  showAndHideOnScroll: true
});

9. Customize the highlight functionality.

$("#dynamicMenu").dynamicContentMenu({
  // Accepts a boolean: true or false
  // Determines if table of contents nested items should be highlighted (set to a different color) while scrolling
  highlightOnScroll: true,

  // Accepts a number
  // The offset distance in pixels to trigger the next active table of contents item
  highlightOffset: 40,

  // Accepts a boolean: true or false
  // Set's the first DynamicContentMenu item as active if no other DynamicContentMenu item is active.
  highlightDefault: true
});

10. Determine whether to extend the page if a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item.

$("#dynamicMenu").dynamicContentMenu({
  // Accepts a boolean: true or false
  // If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased
  extendPage: true,

  // Accepts a number: pixels
  // How close to the bottom of the page a user must scroll before the page is extended
  extendPageOffset: 100
});

11. Customize the browser history functionality.

$("#dynamicMenu").dynamicContentMenu({
  // Accepts a boolean: true or false
  // Adds a hash to the page url to maintain history
  history: true,

  // Accepts a boolean: true or false
  // Adds a hash to the page url, to maintain history, when scrolling to a DynamicContentMenu item
  scrollHistory: false,

  // How the hash value (the anchor segment of the URL, following the
  // # character) will be generated.
  // "compact" (default) - #CompressesEverythingTogether
  // "pretty" - #looks-like-a-nice-url-and-is-easily-readable
  // function(text, element){} - Your own hash generation function that accepts the text as an
  // argument, and returns the hash value.
  hashGenerator: "compact"
});

12. Use Material Design theme.

$("#dynamicMenu").dynamicContentMenu({
  theme: "material"
});

13. Set's the first DynamicContentMenu item as active if no other DynamicContentMenu item is active.

$("#dynamicMenu").dynamicContentMenu({
  highlightDefault: true
});

Changelog:

2019-10-21

• v1.0.1

---

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