Getting started

After installing Joli Table of Contents, you will be redirected to the settings page.

To get started, the most important settings that you need to focus on are the following:

Headings overflow

GENERAL > TABLE OF CONTENTS > Headings overflow

This option defines whether or not the heading will wrap or will be truncated on a single line if the length of the heading exceeds the width of the actual table of contents.

Animate on fold

GENERAL > TABLE OF CONTENTS > Animate on fold

This option will add a short animation to the fold/unfold mechanism.

Headings full row clickable

GENERAL > TABLE OF CONTENTS > Headings full row clickable

This option allows a heading to be clicked on its full width OR on its text only.

Activate this option for more convenience or if you have some background effects.

Clickable area: Full row (red) vs Text link only (yellow)

Table of contents title

GENERAL > TABLE OF CONTENTS HEADER > Table of contents title

Customize the Table of contents title to your liking or your language.

Table of contents toggle

GENERAL > TABLE OF CONTENTS TOGGLE > Toggle type

Choose from different toggle styles : Animated icon / Icon / Text

Depending on the option you choose, you can select either the text or the icon that you want.

Numeration

GENERAL > NUMERATION > Numeration type

The numeration option will prefix automatically each heading with a number.

You can choose between decimal numbers, roman numbers, hexadecimal or even binary (why not!).

Also, the Numeration display option lets you choose to display the current level only or the parents level also.

Headings processing depth

HEADINGS > HEADINGS PROCESSING > Headings depth

By default, all the headings are picked up from H2 to H6.

If you wish to have the Table of contents pick up on H2 & H3 headings only, you need to deselect H4, H5, & H6.

Choose the default theme

THEME > BASE THEME > Theme

Choose a base theme for your website from the available items in the list.

You can override its presets in the STYLE tab.

Further customization

STYLES > *

In order to customize more in details the Table of contents, you can override any of the current theme’s preset from the available options.

The Styles are categorized according to the structure of the Table of contents. Hover on the “Visualise” info icon to see what part of the TOC the section is styling.

Changing any setting will result in overriding the selected theme’s defaults, if applicable.

Switching from theme to theme with exisiting styling options could result in unexpected visual effects.