Introduction

In this video we'll take a look at what the free version of Quick Index is and how you can use it in your Joomla website.

Quick Index makes it easy to add table of contents in Joomla, similarly to what you can see here. The index will automatically contain links pointing to the headings in your content.

The free version of Quick Index covers most of what you might need, while the Pro version offers even more in-depth control.

In the video, we'll take a look at the Free version of Quick Index.

To use Quick Index we will - of course - need to install it first. Check out the installation video to see how to install it.

We now have the latest version of Quick Index installed, which at the moment is version 2.2.0. And what you see here is a Joomla 3.9.2 setup. If you are using newer versions, things might look a bit different.

Simple Index

So, let's see how Quick Index works.

Here we have prepared an example article. First of all, let's assign some headings to the content.

We'll make Fruit and Animals a 'Heading 1'. And these other ones a 'Heading 2."

These headings will tell Quick Index what to show in the table of contents.

We can then simply place an Index in our content by using - what we call - a plugin tag.

All we need to do is place a {index} tag, using curly braces, where we want the index to show. So if we want to have the table of contents at the top of our content, we simply place the {index} tag... at the top of the content!

{index}

When adding the {index} tag before the the first heading, as you see, the editor might keep that heading styling on the first line.

While it is not an issue, for readability we'll just change the {index} tag back to a normal paragraph style.

And there we have it. The {index} tag has been replaced with a nice table of contents. This index contains anchor links to the different headings in your content.

As you can see, clicking for example on "Apples", jumps straight to our Apples heading in the content.

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

But we also have several ways to tell Quick Index which headings to include and which to not include.

Excluding specific headings

If we want to exclude a specific heading from the index, we can do so by giving it a "noindex" class name.

For example, let's say we don't want to include "Bananas" in the index. We'll switch to the html view and we simply add a noindex class to that heading.

Now our index doesn't include the "Bananas" heading anymore. But it still is of course shown in the content.

Excluding blocks of content

What if, instead of a specific heading, we have a whole block of content that we don't want included in the Index?

Well, we can exclude the headings from that part by surrounding the content block with {noindex} tags.

For instance, let's say we don't want to include the Fruit sub-headings in the index. We simply add a {noindex} tag right before them, and a closing {/noindex} tag after them.

And now the "Fruit" subheadings are no longer shown in the index. As you can see, you have plenty of control over which headings you want to show!

There is even a simple way to show the headings from just one section of the content.

Defining the end of the content

To mark the end of the section we want to index, we simply place a closing {/index} tag. Let's place it before "Animals".

Now the index will only include headings found between the opening {index} and the closing {/index} tag, so in this case, only the headings for Fruits.

We might want to split the content up in blocks and have each block use its own index. We can also do that.

First, let me remove some text so it is easier to see what we are working on.

Quick Index will automatically consider a section ended also when it finds a new opening {index} tag.

So we can change this closing tag to instead be another opening {index} tag.

And we now have two separate indexes, one for Fruits and one for Animals.

Ordered / Unordered List

As you might have noticed, our Index is displayed as a numbered list - also called "ordered list".

If we instead wanted the Index to be a bullet list - also called "unordered list" - we can change the default behavior in the Plugin Settings. Or we can do it individually set it in the {index} tag.

We simply add an "ordered" attribute to the Index tag, and give it a value of "false".

This will tell Quick Index to show a bullet list instead. While this second one is still an ordered list.

Settings

The are a number of settings that control the way Quick Index works. We'll get into those in a separate video.

Pro version

As you've probably realised, Quick Index offers plenty of possibilities. And this was just what's available with the Free version!

The Pro version of Quick Index has even more additional features. It allows to individually set list styles for each level, limit the levels to include in the Index, and more. We will get into the Pro version in the next video.

Recap

So just to recap.

We have seen how easy it is to create a table of contents that automatically links to the respective headings.

We have learned how to exclude specific headings from the Index, and how to exclude whole blocks of content.

And we've seen how to choose between a numbered list or a bullet list.

And we're now excited to see what the Pro version can do!

Let's head over to the next video that will cover the Pro version. Or, if you need, first watch the installation video to see how easy it is to get Quick Index installed.