title: TableOfContentsMacro Tabbed Example
caption: Tabbed
tags: table-of-contents-example

!! Tabbed Table of Contents

The tabbed table of contents macro renders a selective expandable table of contents with an attached panel that displays the currently selected tiddler.

!!! Parameters

|!Position |!Name |!Description |!Default |
|1st |tag |Tag to be used for constructing the table of contents | |
|2nd |sort |Optional sorting subfilter (eg `sort[title]`) | |
|3rd |selectedTiddler |Title of the tiddler containing the title of the currently displayed tiddler  |"$:/temp/toc/selectedTiddler" |
|4th |unselectedText |Text to be displayed when no tiddler is selected | |
|5th |missingText |Text to be displayed when the selected tiddler is missing | |
|6th |template |Optional title of a tiddler to be used as a template for rendering the selected tiddler | |

!!! Internal navigation

This example shows how to construct a tabbed table of contents with internal navigation, so that clicking links in the displayed tiddler will replace the displayed tiddler.

```
<<toc-tabbed-internal-nav tag:"TableOfContents" selectedTiddler:"$:/temp/toc/selectedTiddler" unselectedText:"Select a topic in the table of contents. Click the arrow to expand a topic.">>
```

!!! External navigation

This example shows how to construct a tabbed table of contents with external navigation, so that clicking links in the displayed tiddler will open those tiddlers in the story river in the usual way.

```
<<toc-tabbed-external-nav tag:"TableOfContents" selectedTiddler:"$:/temp/toc/selectedTiddler" unselectedText:"Select a topic in the table of contents. Click the arrow to expand a topic.">>
```

!! Example

Type: <$select tiddler="TabbedExampleType">
<option value="toc-tabbed-internal-nav">Open tiddler links internally (toc-tabbed-internal-nav)</option>
<option value="toc-tabbed-external-nav">Open tiddler links externally (toc-tabbed-external-nav)</option>
</$select>

<$macrocall $name={{TabbedExampleType}} tag="TableOfContents" selectedTiddler="$:/temp/toc/selectedTiddler" unselectedText="<p>Select a topic in the table of contents. Click the arrow to expand a topic.</p>" missingText="<p>Missing tiddler.</p>"/>