Tutorial:

Introduction

With Quick Index you can easily add an index (Table of Contents) to your content. The index will be generated based on the headings in your content.

Simply place {index} where you want the index to show.

You can see Quick Index in action on this page at the top, and on all other Tutorial, FAQs and Videos pages on this website.

How to use it (syntax)

It is very easy to create an index: Simply place {index} at the top of your content.

Quick Index will replace the {index} tag with an index block. This will contain links to the different headings in your content.

You will need to use the heading tags (<h1> to <h6>) in your content to tell Quick Index what the headings are.

Quick Index will only collect the headings found AFTER the {index} tag.

Note: Quick Index is most stable and reliable if you place the {index} tag on its own new paragraph line.

Extra parameters

Further on in this tutorial you will see how you can control what the index includes and how it looks.

There are a lot of options in the Quick Index Plugin Settings in which you can set up the default behaviour.
But you can just about override every default setting via the {index} tag by adding extra parameters.

The syntax of these parameters looks like name="value", which you might recognize from how HTML works. For example:

{index ordered="false" max="3"}

Choosing which Headings to include in the Index

By default Quick Index will create an index from all headings found after the {index} tag.

But you have multiple ways to tell Quick Index which headings to include and which to not include.

Minimum and Maximum depth Pro only

By default all heading tags from <h1> to <h6> will be included in the index by Quick Index.

If you only want the <h1>, <h2>, <h3> headings in the index, you can override the Maximum Index Level setting, like:

{index max="3"}

To only include the <h2> and <h3> headings, you override both the Minimum and Maximum Index Level setting, like:

{index min="2" max="3"}

If desired, you can still automatically generate anchors for headings that you don't include in the index, by deciding the Minimum and Maximum Headings Level in the Plugin Settings.

Excluding specific headings

You can exclude specific headings from the index by simply giving it a noindex class name. For instance:

<h2 class="noindex">I don't want to index this heading!</h2>

In the Plugin Settings you can set up extra class names that Quick Index should ignore, in the "No Index Classnames" option.

Defining the end of the content

As mentioned, Quick Index will include all headings after the {index} tag.

But you might want the index to only show the headings from the first section of your content. Or you might want to split the content up in blocks and have each block use its own index.

To mark the end of a section, you simply place a closing {/index} tag. In alternative, Quick Index will also automatically consider a section ended when it finds a new opening {index} tag.

The index will only include headings found between the opening {index} and the closing {/index} tag or the next {index} tag found.

This example will show 2 separate indexes, one for Fruits and one for Animals.

{index}

<h1>Fruits</h1>
Fruit is yummy.

<h2>Apples</h2>
Apples are round and delicious.

<h2>Bananas</h2>
Bananaaaaas!

{index}

<h1>Animals</h1>
Furry animals!

<h2>Cats</h2>
Aaah... a cat :)

<h2>Dogs</h2>
Sit!

{/index}

Excluding blocks of content

If you use headings in a part of your content that you don't want included in the Index, you can exclude those headings from the index by surrounding the content block with {noindex}{/noindex} tags, like:

{index}
All the headings below this part will be included in the Index
...
{noindex}
All the headings below this part will NOT be included in the Index
...
{/noindex}
All the headings below this part will be included in the Index
...

Ordered / Unordered List

The index will be displayed as an ordered (numbered) list by default.

To override the default setting in the {index} tag, and display an unordered (bulleted) list instead, you can do:

{index ordered="false"}

This will result in:

If in the Plugin Settings you set the default setting to unordered, and you want a specific index to be ordered, you can do the opposite:

{index ordered="true"}

Individual Level Pro only

You can also set a different list type for each individual level.. You can specify this both in the Default Settings and in the {index} tag, for example by using ordered_2 for Level 2, ordered_3 for Level 3, and so on.

{index ordered_1="true" ordered_2="false" ordered_3="true"}

This will result in something like:

You can also accomplish the same result with a simpler tag that includes all Levels in a single attribute, by simply listing the types in order inside ordered:

{index ordered="true,false,true"}

Ordered List Style Pro only

In the Pro version of Quick Index you can set the List Style that Ordered Indexes should use. You can set the default behavior in the Plugin Settings, or individually override the setting in the {index} tag.

The default is normal numbering. But you can choose any of these:

{index ordered_style="numbers"} or {index ordered_style="1"}

{index ordered_style="letters"} or {index ordered_style="A"}

{index ordered_style="letters_lowercase"} or {index ordered_style="a"}

{index ordered_style="roman"} or {index ordered_style="I"}

{index ordered_style="roman_lowercase"} or {index ordered_style="i"}

Individual Level Style Pro only

You can also set a different List Style for each individual level in an Ordered List. You can specify this both in the Default Settings and in the {index} tag, for example by using ordered_style_2 for Level 2, ordered_style_3 for Level 3, and so on.

{index ordered_style_1="numbers" ordered_style_2="letters" ordered_style_3="roman"}

This will result in something like:

You can also accomplish the same result with a simpler tag that includes all Levels styles in a single attribute, by simply listing the styles in order inside ordered_style:

{index ordered_style="numbers,letters,roman"}

Add Number to Headings Pro only

The Pro version of Quick Index has an option to automatically prepend the Headings in the content with the numbers used in the index.

For example, this Index:

...would convert the Headings in the content to:

1. Fruit

Fruit is yummy.

1.1. Apples

Apples are round and delicious.

1.1. Bananas

Bananaaaaas!

2. Animals

Furry animals!

1.1. Cats

Aaah... a cat :)

1.1. Dogs

Sit!

Styling

As you can see, the index gets a grey block around it. This is because the div element around the index gets a default class name of well. The well class is styled by Bootstrap, so if you use a template using Bootstrap, you will also see this grey block styling.

However, you are free to give the index any class name you want. You can change this (or add class names) in the Quick Index Plugin Settings. Also many other elements in the index get class names, which you can configure in the settings as well.

Because of these class names, you have full freedom to style the index however you want via CSS. We recommend you place your custom CSS styles in a custom stylesheet loaded by your template.

The container div also always gets a fixed class name of rl_quickindex. So you can use that to base your custom styling on too.

As you can see in the index blocks in this website at the top of the Tutorial, FAQs and Videos pages, the style shows a magnifying glass icon as background. If you want to replicate the same styling, here is the CSS for that:

.rl_quickindex:before {
    font-family: IcoMoon;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: none;

    content: "\53";
    font-weight: 400;
    font-size: 160px;
    line-height: 160px;

    width: 160px;
    height: 160px;

    display: block;
    position: absolute;
    top: 20px;
    right: 0;
    
    opacity: .05;
}
Note: This specific style example requires your template to already load the IcoMoon font (available in Joomla core).

Settings

Quick Index is packed with options, giving you control over how it works and behaves. Here is the full list of the options you can find in the Quick Index system plugin settings:

Styling

Classname Set a class name to add to the div tag around the index list.
Default setting: well
Classname List Set a class name to add to the index list tag.
Default setting: index
Classname Headings Set an optional class name to add to the heading tags.
Default setting: indexed
Classname Numbers Set a class name to add to the span around the numbers added to the headings.
Default setting: heading_number

Behaviour

Index Title Enter a title that will be placed at the top of the index list. This value will be handled as a Joomla language string.
Index Title Heading Select the heading tag to use for the index title.
Options: h1, h2, h3, h4, h5, h6
Minimum Index Level Set the minimum heading level to include in the index.
Options: h1, h2, h3, h4, h5, h6
Maximum Index Level Set the maximum heading level to include in the index.
Options: h1, h2, h3, h4, h5, h6
Minimum Headings Level Set the minimum heading level. All these headings will be converted based on your settings, like adding anchors, classnames and numbered prefixes.
Options: h1, h2, h3, h4, h5, h6
Maximum Headings Level Set the maximum heading level. All these headings will be converted based on your settings, like adding anchors, classnames and numbered prefixes.
Options: h1, h2, h3, h4, h5, h6
Ordered List Select whether to use ordered or unordered lists.
Options: No, Yes, Set individually Pro only
Set individually
allows you to choose the list style for each level.
Ordered List Style Set the ordered list style.
Options:
1, 2, 3
A, B, C
a, b, c
I, II, III
i, ii, iii

Tag Syntax

Quick Index Tag The word to be used in the tags.
Note: If you change this, all existing tags will not work anymore.
Default setting: index
No Index Tag The word to be used in the noindex tags.
Headings in the content between these tags will not be included in the index.
Default setting: nondex
Tag Characters The surrounding characters of the tag syntax.
Note: If you change this, all existing tags will not work anymore.
Options: {...}, [...], {{...}}, [[...]], [:...:], [%...%]

Advanced Settings

No Index Classnames A comma separated list of class names. Headings with any of these class name will not be included in the index.
Index Title Classnames A comma separated list of class names. Headings with any of these class name will be displayed as a heading inside the index list.
Index Title Offset Set an offset to be used as heading tag inside the index.
For instance, if offset is set to 2 and a H1 heading has a title class name, it will appear as a H3 in the index.
Add Links Select whether to add anchor links to the items in the index list.
Add Links to Titles Select whether to add anchor links to the titles inside the index list.
Add Number to Headings Select whether to add the generated number to the headings.
Options: No, Yes, Only when ordered
Number Separator Set the character to place after the number, before the heading text.
Add Number to IDs Select whether to add the generated number to the ids used for linking.
Add Parents to IDs Select whether to add the parent headings to the ids used for linking.
Remove Words from IDs A comma separated list of words to remove from the ids used for linking.
Disable on Components Select in which front-end components NOT to enable the use of this extension.
Remove in Disabled Components If selected, the plugin syntax will get removed from the component. If not, the original plugins syntax will remain intact.
Place HTML comments By default HTML comments are placed around the output of this extension.
These comments can help you troubleshoot when you don't get the output you expect.
If you prefer to not have these comments in your HTML output, turn this option off.
Free vs Pro:

Create indexes::Create indexes / Table of Contents based on headings in content.
Link index::Link the index items to the matching headings in your content.
Ordered / Unordered::Choose between ordered or unordered lists in the index.
Custom styling::The ability to set custom classnames gives you full freedom to style the index via custom css.

List styles::Set the list style for ordered lists in the index.
Individual list styles::Set the list style per level from heading 1 to 6.
Min/max depth::Set the minimum and maximum depth of headings (<h1> to <h6>) to include in the index.
Automatic heading numbering::Automatically add the index numbering to the headings in your content.

With Quick Index you can easily add an index (Table of Contents) to your content. The index will be generated based on the headings in your content.

Simply place {index} where you want the index to show.

You can see Quick Index in action on this website on all the TutorialFAQs and Videos pages (at the top of the content).

Quick Index offers a lot of options, allowing you to control what the index includes and how it looks. See the full documentation to find out more.

And here is a small example:

Quick Index Example

1. Fruit

Fruit is yummy.

1.1. Apples

Apples are round and delicious.

1.2. Bananas

Bananaaaaas !

2. Animals

Furry animals!

2.1. Cats

Aaah... a cat :)

2.2. Dogs

Sit!