With the introduction of the version 2, Joli Table of contents benefits from a complete redesign.

This new redesign brings much more flexibility in terms of styling, adds performance, gets rid of jQuery, and is correcting the flaws of the version 1.

To achieve these goals, building on top of V1 was not possible, that is why the version 2 comes with some breaking changes.

To limit the impact of switching from V1 to V2, the plugin takes care of transferring your current settings to match as closely as possible of what the V2 brings.

So what should you expect from V2 and what are the major changes ?

Your custom CSS from v1 will not work anymore

The css structure of the plugin has been totally modified and old custom CSS will not work.

On the other hand, V2 comes with a lot more customization options and you will need much less custom css in v2, if not none at all!

Some hooks are becoming deprecated and many more added

To keep the plugin developer friendly, Joli Table of contents leverages the power of hooks wherever it’s needed. These hooks let you extend the plugin to further customize it.

You can find the list of all available hooks in the documentation.

Themes now use a CSS variable approach

Styling the table of contents with CSS variables brings much more flexibility for theming and gets rid of a lot of inline CSS.

Themes are built around these and it also makes it easier for the user to build their own themes or custom CSS if needed.

The STYLES settings override these CSS variables when applicable.

View Page

List of all CSS variables.

Goodbye front-end jQuery

To improve performance and keep a small footprint, Joli Table of contents gets rid of jQuery from V2 onwards. Only pure vanilla javascript.

Updated settings page

The new settings page is getting much clearer than it used to be and more user-friendly.

Saving settings is now handled by AJAX, which means no page reload and makes it easier to adjust multiple settings without going back to where you were at every save.

Improved Floating table of contents and new widgets [PRO]

The new floating table of contents brings some new welcome improvements such as extended customization and navigation buttons.

The floating widget that show the current heading is now fully customizable and does not depend on the styling of the actual headings.

The optional navigation buttons let the user jump over to the next heading without having to scroll.

Slide out table of contents widget [PRO]

The slide out table of contents widget brings more value to your page and makes it more readable. It shows the table of contents in a fixed position on the side of the screen.

Progress bar widget [PRO]

This new widget shows a fixed progress bar over the content and indicates the percentage of advancement throughout the reading.