diff --git a/core/wiki/macros/toc.tid b/core/wiki/macros/toc.tid
index 5db14fa97..fadd4ba91 100644
--- a/core/wiki/macros/toc.tid
+++ b/core/wiki/macros/toc.tid
@@ -1,30 +1,33 @@
 title: $:/core/macros/toc
 tags: $:/tags/Macro
 
-\define toc-body(rootTag,tag,sort:"")
+\define toc-body(rootTag,tag,sort:"",itemClassFilter)
 <ol class="tc-toc">
 <$list filter="""[tag[$tag$]!has[draft.of]$sort$]""">
-<li>
+<$set name="toc-item-class" filter="""$itemClassFilter$""" value="toc-item-selected" emptyValue="toc-item">
+<li class=<<toc-item-class>>>
 <$list filter="[is[current]toc-link[no]]" emptyMessage="<$link><$view field='caption'><$view field='title'/></$view></$link>">
 <$view field="caption">
 <$view field="title"/>
 </$view>
 </$list>
 <$list filter="""[all[current]] -[[$rootTag$]]""">
-<$macrocall $name="toc-body" rootTag="""$rootTag$""" tag=<<currentTiddler>> sort="$sort$"/>
+<$macrocall $name="toc-body" rootTag="""$rootTag$""" tag=<<currentTiddler>> sort="""$sort$""" itemClassFilter="""$itemClassFilter$"""/>
 </$list>
 </li>
+</$set>
 </$list>
 </ol>
 \end
 
-\define toc(tag,sort:"")
-<<toc-body rootTag:"""$tag$""" tag:"""$tag$""" sort:"""$sort$""">>
+\define toc(tag,sort:"",itemClassFilter)
+<<toc-body rootTag:"""$tag$""" tag:"""$tag$""" sort:"""$sort$""" itemClassFilter:"""itemClassFilter""">>
 \end
 
-\define toc-linked-expandable-body(tag,sort:"")
+\define toc-linked-expandable-body(tag,sort:"",itemClassFilter)
 <$set name="toc-state" value=<<qualify "$:/state/toc/$tag$-$(currentTiddler)$">>>
-<li>
+<$set name="toc-item-class" filter="""$itemClassFilter$""" value="toc-item-selected" emptyValue="toc-item">
+<li class=<<toc-item-class>>>
 <$link>
 <$reveal type="nomatch" state=<<toc-state>> text="open">
 <$button set=<<toc-state>> setTo="open" class="tc-btn-invisible">
@@ -41,15 +44,17 @@ tags: $:/tags/Macro
 </$view>
 </$link>
 <$reveal type="match" state=<<toc-state>> text="open">
-<$macrocall $name="toc-expandable" tag=<<currentTiddler>> sort="$sort$"/>
+<$macrocall $name="toc-expandable" tag=<<currentTiddler>> sort="""$sort$""" itemClassFilter="""$itemClassFilter$"""/>
 </$reveal>
 </li>
 </$set>
+</$set>
 \end
 
-\define toc-unlinked-expandable-body(tag,sort:"")
+\define toc-unlinked-expandable-body(tag,sort:"",itemClassFilter)
 <$set name="toc-state" value=<<qualify "$:/state/toc/$tag$-$(currentTiddler)$">>>
-<li>
+<$set name="toc-item-class" filter="""$itemClassFilter$""" value="toc-item-selected" emptyValue="toc-item">
+<li class=<<toc-item-class>>>
 <$reveal type="nomatch" state=<<toc-state>> text="open">
 <$button set=<<toc-state>> setTo="open" class="tc-btn-invisible">
 {{$:/core/images/right-arrow}}
@@ -67,25 +72,27 @@ tags: $:/tags/Macro
 </$button>
 </$reveal>
 <$reveal type="match" state=<<toc-state>> text="open">
-<$macrocall $name="toc-expandable" tag=<<currentTiddler>> sort="$sort$"/>
+<$macrocall $name="toc-expandable" tag=<<currentTiddler>> sort="""$sort$""" itemClassFilter="""$itemClassFilter$"""/>
 </$reveal>
 </li>
 </$set>
+</$set>
 \end
 
-\define toc-expandable(tag,sort:"")
+\define toc-expandable(tag,sort:"",itemClassFilter)
 <ol class="tc-toc toc-expandable">
 <$list filter="[tag[$tag$]!has[draft.of]$sort$]">
-<$list filter="[is[current]toc-link[no]]" emptyMessage="<<toc-linked-expandable-body tag:'$tag$' sort:'$sort$'>>">
-<<toc-unlinked-expandable-body tag:"$tag$" sort:"$sort$">>
+<$list filter="[is[current]toc-link[no]]" emptyMessage="<<toc-linked-expandable-body tag:'$tag$' sort:'$sort$' itemClassFilter:'$itemClassFilter$'>>">
+<<toc-unlinked-expandable-body tag:"""$tag$""" sort:"""$sort$""" itemClassFilter:"""itemClassFilter""">>
 </$list>
 </$list>
 </ol>
 \end
 
-\define toc-linked-selective-expandable-body(tag,sort:"")
+\define toc-linked-selective-expandable-body(tag,sort:"",itemClassFilter)
 <$set name="toc-state" value=<<qualify "$:/state/toc/$tag$-$(currentTiddler)$">>>
-<li>
+<$set name="toc-item-class" filter="""$itemClassFilter$""" value="toc-item-selected" emptyValue="toc-item">
+<li class=<<toc-item-class>>>
 <$link>
 <$list filter="[all[current]tagging[]limit[1]]" variable="ignore" emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}</$button>">
 <$reveal type="nomatch" state=<<toc-state>> text="open">
@@ -104,15 +111,17 @@ tags: $:/tags/Macro
 </$view>
 </$link>
 <$reveal type="match" state=<<toc-state>> text="open">
-<$macrocall $name="toc-selective-expandable" tag=<<currentTiddler>> sort="$sort$"/>
+<$macrocall $name="toc-selective-expandable" tag=<<currentTiddler>> sort="""$sort$""" itemClassFilter="""$itemClassFilter$"""/>
 </$reveal>
 </li>
 </$set>
+</$set>
 \end
 
-\define toc-unlinked-selective-expandable-body(tag,sort:"")
+\define toc-unlinked-selective-expandable-body(tag,sort:"",itemClassFilter)
 <$set name="toc-state" value=<<qualify "$:/state/toc/$tag$-$(currentTiddler)$">>>
-<li>
+<$set name="toc-item-class" filter="""$itemClassFilter$""" value="toc-item-selected" emptyValue="toc-item">
+<li class=<<toc-item-class>>>
 <$list filter="[all[current]tagging[]limit[1]]" variable="ignore" emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}</$button> <$view field='caption'><$view field='title'/></$view>">
 <$reveal type="nomatch" state=<<toc-state>> text="open">
 <$button set=<<toc-state>> setTo="open" class="tc-btn-invisible">
@@ -132,18 +141,39 @@ tags: $:/tags/Macro
 </$reveal>
 </$list>
 <$reveal type="match" state=<<toc-state>> text="open">
-<$macrocall $name="toc-selective-expandable" tag=<<currentTiddler>> sort="$sort$"/>
+<$macrocall $name="""toc-selective-expandable""" tag=<<currentTiddler>> sort="""$sort$""" itemClassFilter="""$itemClassFilter$"""/>
 </$reveal>
 </li>
 </$set>
+</$set>
 \end
 
-\define toc-selective-expandable(tag,sort:"")
+\define toc-selective-expandable(tag,sort:"",itemClassFilter)
 <ol class="tc-toc toc-selective-expandable">
 <$list filter="[tag[$tag$]!has[draft.of]$sort$]">
-<$list filter="[is[current]toc-link[no]]" variable="ignore" emptyMessage="<<toc-linked-selective-expandable-body tag:'$tag$' sort:'$sort$'>>">
-<<toc-unlinked-selective-expandable-body tag:"$tag$" sort:"$sort$">>
+<$list filter="[is[current]toc-link[no]]" variable="ignore" emptyMessage="<<toc-linked-selective-expandable-body tag:'$tag$' sort:'$sort$' itemClassFilter:'$itemClassFilter$'>>">
+<<toc-unlinked-selective-expandable-body tag:"""$tag$""" sort:"""$sort$""" itemClassFilter:"""$itemClassFilter$""">>
 </$list>
 </$list>
 </ol>
 \end
+
+\define toc-tabbed-selected-item-filter(selectedTiddler)
+[all[current]field:title{$selectedTiddler$}]
+\end
+
+\define toc-tabbed(tag,sort:"",selectedTiddler:"$:/temp/toc/selectedTiddler",unselectedText)
+<$linkcatcher to="$selectedTiddler$">
+<$tiddler tiddler={{$selectedTiddler$}}>
+<div class="tc-tabbed-table-of-contents">
+<div class="tc-table-of-contents">
+<$macrocall $name="toc-selective-expandable" tag="""$tag$""" sort="""$sort$""" itemClassFilter=<<toc-tabbed-selected-item-filter selectedTiddler:"""$selectedTiddler$""">>/>
+</div>
+<div class="tc-tabbed-table-of-contents-content">
+<h1><$view field="caption"><$view field="title"/></$view></h1>
+<$transclude mode="block">$unselectedText$</$transclude>
+</div>
+</div>
+</$tiddler>
+</$linkcatcher>
+\end
diff --git a/editions/tw5.com/tiddlers/demonstrations/TableOfContentsMacro Tabbed Example.tid b/editions/tw5.com/tiddlers/demonstrations/TableOfContentsMacro Tabbed Example.tid
new file mode 100644
index 000000000..5dc6b5ca8
--- /dev/null
+++ b/editions/tw5.com/tiddlers/demonstrations/TableOfContentsMacro Tabbed Example.tid	
@@ -0,0 +1,9 @@
+title: TableOfContentsMacro Tabbed Example
+caption: Tabbed
+tags: table-of-contents-example
+
+!! Tabbed Table of Contents
+
+<$macrocall $name='wikitext-example-without-html'
+src='<<toc-tabbed tag:"TableOfContents" sort:"" selectedTiddler:"$:/temp/toc/selectedTiddler" unselectedText:"Select a topic in the table of contents. Click the arrow to expand a topic.">>
+'/>
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 0434c13cd..22e9ff2bc 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -1463,6 +1463,65 @@ a.tc-tiddlylink.tc-plugin-info:hover {
 	font-weight: 200;
 }
 
+.tc-tabbed-table-of-contents {
+	display: -webkit-flex;
+	display: flex;
+}
+
+.tc-tabbed-table-of-contents .tc-table-of-contents {
+	z-index: 100;
+	display: inline-block;
+	padding-left: 1em;
+	max-width: 50%;
+	-webkit-flex: 0 0 auto;
+	flex: 0 0 auto;
+	background: <<colour tab-background>>;
+	border-left: 1px solid <<colour tab-border>>;
+	border-top: 1px solid <<colour tab-border>>;
+	border-bottom: 1px solid <<colour tab-border>>;
+}
+
+.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a,
+.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {
+	display: block;
+	padding: 0.12em 1em 0.12em 0.25em;
+}
+
+.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a {
+	border-top: 1px solid <<colour tab-background>>;
+	border-left: 1px solid <<colour tab-background>>;
+	border-bottom: 1px solid <<colour tab-background>>;
+}
+
+.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item > a:hover {
+	text-decoration: none;
+	border-top: 1px solid <<colour tab-border>>;
+	border-left: 1px solid <<colour tab-border>>;
+	border-bottom: 1px solid <<colour tab-border>>;
+	background: <<colour tab-border>>;
+}
+
+.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a {
+	border-top: 1px solid <<colour tab-border>>;
+	border-left: 1px solid <<colour tab-border>>;
+	border-bottom: 1px solid <<colour tab-border>>;
+	background: <<colour background>>;
+	margin-right: -1px;
+}
+
+.tc-tabbed-table-of-contents .tc-table-of-contents .toc-item-selected > a:hover {
+	text-decoration: none;
+}
+
+.tc-tabbed-table-of-contents .tc-tabbed-table-of-contents-content {
+	display: inline-block;
+	vertical-align: top;
+	padding-left: 1.5em;
+	border: 1px solid <<colour tab-border>>;
+	-webkit-flex: 1 0 50%;
+	flex: 1 0 50%;
+}
+
 /*
 ** Dirty indicator
 */