Adding an Expandable Contents to a TiddlyWiki

So this one bothered me for a bit but it's entirely doable to have a dropdown list of pages that you've tagged in a certain way! I can in no way take any credit for this solution as the information can be found here. This is what you'll need to do though:

Create a new Tiddler to import the plugin
- Call the tiddler:
- Tag the tiddler:
- Use the content at the bottom of this page

Then you're basically ready to go! to use this plugin you'll need to ensure that your tiddlers are tagged accordingly. Any tiddler that you tag "Content" will show in the first level of your contents lists, any tiddlers tagged with the name of a tiddler tagged content (or can be traced back to one that is) will show as a child of that entry on the contents list. By doing this you can create a menu of a few different types anywhere you put the relevant code, good places might be a Favourites tab or left hand menu.

Styles

There are a few different styles available, again these can be found here but for convenience:

The basic, selectably expandable contents list can be invoked by putting the following in the tiddler of your choice:

<<toc-selective-expandable "Contents">>

So here's the content for the tiddler that needs to be made.

Tiddler Content:

\define inmysocksMobileMenusMakeState(MenuName)$:/state/Menu/$MenuName$/$(CurrentTiddler)$\end\define inmysocksMobileMenusMakeParentState(MenuName)$:/state/Menu/$MenuName$/$(ParentTiddler)$\end\define inmysocksMobileMenusEmptyMessage(MenuName MenuType)<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!normal_menu" text="""$MenuType$""">    <$tiddler tiddler={{$:/state/Menu/$MenuName$/current}}>        <$button class='tc-btn-invisible'>                {{$:/core/images/chevron-left}}                ''<$view field=caption>                    <$view field=title/>                ''                <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=''/>                
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents" text="""$MenuType$""">    <$button class='tc-btn-invisible'>        {{$:/core/images/chevron-left}}        <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=''/>        <$link to={{$:/state/Menu/$MenuName$/current}}>        ''<$view tiddler={{$:/state/Menu/$MenuName$/current}} field=caption><$view tiddler='$:/state/Menu/$MenuName$/current' field=text/>''        
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents_selective" text="""$MenuType$""">    <$button class='tc-btn-invisible'>        {{$:/core/images/chevron-left}}        <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=''/>        <$link to={{$:/state/Menu/$MenuName$/current}}>        ''<$view tiddler={{$:/state/Menu/$MenuName$/current}} field=caption><$view tiddler='$:/state/Menu/$MenuName$/current' field=text/>''        
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents_selective_hierarchical" text="""$MenuType$""">    <$button class='tc-btn-invisible'>        {{$:/core/images/chevron-left}}        <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=''/>        <$link to={{$:/state/Menu/$MenuName$/current}}>        ''<$view tiddler={{$:/state/Menu/$MenuName$/current}} field=caption><$view tiddler='$:/state/Menu/$MenuName$/current' field=text/>''        
\end\define inmysocksMobileMenusEmptyMessage2ListItem(MenuName MenuType)<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!normal_menu" text=$MenuType$ tag=span>    <$button class='tc-btn-invisible' set=<<inmysocksMobileMenusMakeState """$MenuName$""">> setTo=<>>        {{$:/core/images/right-arrow}}<$view tiddler=<> field='caption'><$view tiddler=<> field='title'/>        <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value={{!!title}}/>        
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents" text=$MenuType$>    <$button class='tc-btn-invisible' set=<<inmysocksMobileMenusMakeState """$MenuName$""">> setTo=<>>        {{$:/core/images/right-arrow}}        <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value={{!!title}}/>        <$link to=<>>        <$view tiddler=<> field='caption'><$view tiddler=<> field='title'/>        
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents_selective" text=$MenuType$>    <$list filter='[tag{!!title}limit[1]]' variable=dummy emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}">        <$button class='tc-btn-invisible' set=<<inmysocksMobileMenusMakeState """$MenuName$""">> setTo=<>>            {{$:/core/images/right-arrow}}            <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value={{!!title}}/>                <$link to=<>>        <$view tiddler=<> field='caption'><$view tiddler=<> field='title'/>        
\end\define inmysocksMobileMenusEmptyMessage2(MenuName MenuType ListField)<$reveal type='match' state='$:/macros/inmysocks/MobileMenu!!empty_field' text="""$ListField$""">    <$reveal type='nomatch' state='$:/macros/inmysocks/MobileMenu!!table_of_contents_selective_hierarchical' text="""$MenuType$""">        <$list filter='[tag]'>            <<inmysocksMobileMenusEmptyMessage2ListItem """$MenuName$""" """$MenuType$""">>                <$reveal type='match' state='$:/macros/inmysocks/MobileMenu!!table_of_contents_selective_hierarchical' text="""$MenuType$""">        <$set name=Filter value="""[prefix[$:/state/Menu/$MenuName$/]has[text]]-[[$:/state/Menu/$MenuName$/current]]""">            <$set name=TagsFilter value="""[!is[system]]+[tag{$:/state/Menu/$MenuName$/current}]""">                <$list filter=<> emptyMessage=<<inmysocksMobileMenusHierarchicalEmptyMessage1 """$MenuName$""">>>                    <<inmysocksMobileMenusTemplateHierarchicalListMacro1 """$MenuName$""">>                                        <$reveal type='nomatch' state='$:/macros/inmysocks/MobileMenu!!empty_field' text="""$ListField$""">    <$tiddler tiddler={{$:/state/Menu/$MenuName$/current}}>        <$list filter='[list[!!$ListField$]]'>            <<inmysocksMobileMenusEmptyMessage2ListItem """$MenuName$""" """$MenuType$""">>            \end\define inmysocksMobileMenusTemplateListItemTOCSelectiveIsSpecial(MenuName MenuType ListField)<$reveal type='match' state='$:/macros/inmysocks/MobileMenu!!empty_field' text="""$ListField$""">    <$list filter='[taglimit[1]]' variable=dummy emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}">        <$button class='tc-btn-invisible' set=<<inmysocksMobileMenusMakeState """$MenuName$""">> setTo=<>>            {{$:/core/images/right-arrow}}            <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=<>/>            <$reveal type='nomatch' state='$:/macros/inmysocks/MobileMenu!!empty_field' text="""$ListField$""">    <$tiddler tiddler={{$:/state/Menu/$MenuName$/current}}>        <$list filter='[list[!!$ListField$]limit[1]]' variable=dummy emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}">            <$button class='tc-btn-invisible' set=<<inmysocksMobileMenusMakeState """$MenuName$""">> setTo=<>>                {{$:/core/images/right-arrow}}                <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=<>/>                        \end\define inmysocksMobileMenusTemplateListItem(MenuName MenuType ListField)<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!normal_menu" text=$MenuType$>    <$button class='tc-btn-invisible' set=<<inmysocksMobileMenusMakeState """$MenuName$""">> setTo=<>>        {{$:/core/images/right-arrow}}<$view tiddler=<> field='caption'><$view tiddler=<> field='title'/>        <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=<>/>        
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents" text=$MenuType$>    <$button class='tc-btn-invisible' set=<<inmysocksMobileMenusMakeState """$MenuName$""">> setTo=<>>        {{$:/core/images/right-arrow}}        <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=<>/>        <$link to=<>>        <$view tiddler=<> field='caption'><$view tiddler=<> field='title'/>        
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents_selective" text=$MenuType$>    <<inmysocksMobileMenusTemplateListItemTOCSelectiveIsSpecial """$MenuName$""" """$MenuType$""" """$ListField$""">>    <$link to=<>>        <$view tiddler=<> field='caption'><$view tiddler=<> field='title'/>        
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents_selective_hierarchical" text=$MenuType$>\end\define inmysocksMobileMenusTemplate(MenuName MenuType ListField)<$set name=CurrentTiddler value={{$:/state/Menu/$MenuName$/current}}>    <$list filter='[textremoveprefix[$:/state/Menu/$MenuName$/]]-[[current]]+[limit[1]]' variable=ParentTiddler emptyMessage=<<inmysocksMobileMenusEmptyMessage2 """$MenuName$""" """$MenuType$""" """$ListField$""">>>        <$reveal type='nomatch' state='$:/macros/inmysocks/MobileMenu!!table_of_contents_selective_hierarchical' text="""$MenuType$""">            <$reveal type='match' state='$:/macros/inmysocks/MobileMenu!!empty_field' text="""$ListField$""">                <$list filter='[tag]' variable=ThisTiddler2>                    <<inmysocksMobileMenusTemplateListItem """$MenuName$""" """$MenuType$""" """$ListField$""">>                                        <$reveal type='nomatch' state='$:/macros/inmysocks/MobileMenu!!empty_field' text="""$ListField$""">                <$tiddler tiddler={{$:/state/Menu/$MenuName$/current}}>                    <$list filter='[list[!!$ListField$]]' variable=ThisTiddler2>                        <<inmysocksMobileMenusTemplateListItem """$MenuName$""" """$MenuType$""" """$ListField$""">>                                                                <$reveal type='match' state='$:/macros/inmysocks/MobileMenu!!table_of_contents_selective_hierarchical' text="""$MenuType$""">            <$set name=Filter value="""[prefix[$:/state/Menu/$MenuName$/]has[text]]-[[$:/state/Menu/$MenuName$/current]]""">                <$set name=TagsFilter value="""[!is[system]]+[tag{$:/state/Menu/$MenuName$/current}]""">                    <$list filter=<> emptyMessage=<<inmysocksMobileMenusHierarchicalEmptyMessage1 """$MenuName$""">>>                        <<inmysocksMobileMenusTemplateHierarchicalListMacro1 """$MenuName$""">>                                                            \end\define inmysocksMobileMenusTemplateHierarchicalListMacro1(MenuName)<$list filter='[is[current]removeprefix[$:/state/Menu/$MenuName$/]]' variable=CurrentTag><<inmysocksMobileMenusHierarchicalInnerMacro """$MenuName$""">>\end\define inmysocksMobileMenusHierarchicalInnerMacro(MenuName)<$set name=TagsFilter value='$(TagsFilter)$+[tag[$(CurrentTag)$]]'><$set name=Filter value='$(Filter)$-[[$(currentTiddler)$]]'><$list filter=<> emptyMessage=<<inmysocksMobileMenusHierarchicalEmptyMessage2 """$MenuName$""">>><<inmysocksMobileMenusTemplateHierarchicalListMacro1 """$MenuName$""">>\end\define inmysocksMobileMenusHierarchicalEmptyMessage2(MenuName)<$list filter=<>>    <$list filter='$(TagsFilter)$+[tag[$(currentTiddler)$]]+[limit[1]]' variable=dummy emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}">        <$button class='tc-btn-invisible' set=<<inmysocksMobileMenusMakeState """$MenuName$""">> setTo=<>>            {{$:/core/images/right-arrow}}            <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value={{!!title}}/>                <$link to=<>>        <$view tiddler=<> field='caption'><$view tiddler=<> field='title'/>        
\end\define inmysocksMobileMenusHierarchicalEmptyMessage1(MenuName)<$list filter='[tag{$:/state/Menu/$MenuName$/current}]'>    <$list filter='[tag{$:/state/Menu/$MenuName$/current}]+[tag]+[limit[1]]' variable=dummy emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}">        <$button class='tc-btn-invisible' set=<<inmysocksMobileMenusMakeState """$MenuName$""">> setTo=<>>            {{$:/core/images/right-arrow}}            <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value={{!!title}}/>                <$link to=<>>        <$view tiddler=<> field='caption'><$view tiddler=<> field='title'/>        
\end\define inmysocksMobileMenusRootListEntry(MenuName MenuType)<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!normal_menu" text=$MenuType$>    <$button class='tc-btn-invisible' set='$:/state/Menu/$MenuName$/current' setTo={{!!title}}>        {{$:/core/images/right-arrow}}<$view field='caption'><$view field='title'/>        <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value={{!!title}}/>        
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents" text=$MenuType$>    <$button class='tc-btn-invisible' set='$:/state/Menu/$MenuName$/current' setTo={{!!title}}>        {{$:/core/images/right-arrow}}        <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value={{!!title}}/>        <$link>        <$view field='caption'><$view field='title'/>        
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents_selective" text=$MenuType$>    <$list filter='[tag{!!title}limit[1]]' variable=dummy emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}">        <$button class='tc-btn-invisible' set='$:/state/Menu/$MenuName$/current' setTo={{!!title}}>            {{$:/core/images/right-arrow}}            <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value={{!!title}}/>                <$link>        <$view field='caption'><$view field='title'/>        
<$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents_selective_hierarchical" text=$MenuType$>    <$list filter='[tag{!!title}limit[1]]' variable=dummy emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}">        <$button class='tc-btn-invisible' set='$:/state/Menu/$MenuName$/current' setTo={{!!title}}>            {{$:/core/images/right-arrow}}            <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value={{!!title}}/>                <$link>        <$view field='caption'><$view field='title'/>        
\end\define MobileMenu(RootTag:"RootTag" MenuName:Menu MenuType:Menu MenuTitle:"" ShowSubtitle:no ShowBody:no ListField:"")<$reveal type=nomatch state="""$:/macros/inmysocks/MobileMenu!!include_title""" text="""$MenuTitle$""">    $MenuTitle$<$reveal type='match' state='$:/state/Menu/$MenuName$/current' text=''>    <$reveal type='match' state='$:/macros/inmysocks/MobileMenu!!empty_field' text="""$ListField$""">        <$list filter='[tag[$RootTag$]]'>            <<inmysocksMobileMenusRootListEntry """$MenuName$""" """$MenuType$""">>                <$reveal type='nomatch' state='$:/macros/inmysocks/MobileMenu!!empty_field' text="""$ListField$""">        <$list filter={{!!$ListField$}}>            <<inmysocksMobileMenusRootListEntry """$MenuName$""" """$MenuType$""">>            <$reveal type='nomatch' state='$:/state/Menu/$MenuName$/current' text=''>    <$list filter='[is[system]prefix[$:/state/Menu/$MenuName$/]has[text]]-[[$:/state/Menu/$MenuName$/current]]+[limit[1]]' emptyMessage=<<inmysocksMobileMenusEmptyMessage """$MenuName$""" """$MenuType$""">>>     <$list filter='[text{$:/state/Menu/$MenuName$/current}removeprefix[$:/state/Menu/$MenuName$/]]-[[current]]+[limit[1]]' variable=ParentTiddler>        <$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!normal_menu" text=$MenuType$>            <$button class='tc-btn-invisible' style='text-align:left'>                {{$:/core/images/chevron-left}}                ''<$view tiddler={{$:/state/Menu/$MenuName$/current}} field=caption><$view tiddler={{$:/state/Menu/$MenuName$/current}} field=title/>''                <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=<>/>                <$action-setfield $tiddler=<<inmysocksMobileMenusMakeParentState """$MenuName$""">> $value=''/>                        
                <$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents" text=$MenuType$>            <$button class='tc-btn-invisible'>                {{$:/core/images/chevron-left}}                <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=<>/>                <$action-setfield $tiddler=<<inmysocksMobileMenusMakeParentState """$MenuName$""">> $value=''/>                        <$link to={{$:/state/Menu/$MenuName$/current}}>                ''<$view tiddler={{$:/state/Menu/$MenuName$/current}} field=caption><$view tiddler={{$:/state/Menu/$MenuName$/current}} field=title/>''                        
                <$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents_selective" text=$MenuType$>            <$button class='tc-btn-invisible'>                {{$:/core/images/chevron-left}}                <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=<>/>                <$action-setfield $tiddler=<<inmysocksMobileMenusMakeParentState """$MenuName$""">> $value=''/>                        <$link to={{$:/state/Menu/$MenuName$/current}}>                ''<$view tiddler={{$:/state/Menu/$MenuName$/current}} field=caption><$view tiddler={{$:/state/Menu/$MenuName$/current}} field=title/>''                        
                <$reveal type='match' state="$:/macros/inmysocks/MobileMenu!!table_of_contents_selective_hierarchical" text=$MenuType$>            <$button class='tc-btn-invisible'>                {{$:/core/images/chevron-left}}                <$action-setfield $tiddler='$:/state/Menu/$MenuName$/current' $value=<>/>                <$action-setfield $tiddler=<<inmysocksMobileMenusMakeParentState """$MenuName$""">> $value=''/>                        <$link to={{$:/state/Menu/$MenuName$/current}}>                ''<$view tiddler={{$:/state/Menu/$MenuName$/current}} field=caption><$view tiddler={{$:/state/Menu/$MenuName$/current}} field=title/>''                        
                <$reveal type='match' state='$:/macros/inmysocks/MobileMenu!!include_subtitle' text=$ShowSubtitle$>        <$transclude tiddler={{$:/state/Menu/$MenuName$/current}} field='subtitle' mode=block/>        <$reveal type='match' state='$:/macros/inmysocks/MobileMenu!!empty_field' text="""$ListField$""">        <$list filter='[tag{$:/state/Menu/$MenuName$/current}limit[1]]' variable=ThisTiddler>            <<inmysocksMobileMenusTemplate """$MenuName$""" """$MenuType$""" """$ListField$""">>                <$reveal type='nomatch' state='$:/macros/inmysocks/MobileMenu!!empty_field' text="""$ListField$""">        <$tiddler tiddler={{$:/state/Menu/$MenuName$/current}}>            <$list filter='[list[!!$ListField$]limit[1]]' variable=ThisTiddler>                <<inmysocksMobileMenusTemplate """$MenuName$""" """$MenuType$""" """$ListField$""">>                            <$reveal type='match' state='$:/macros/inmysocks/MobileMenu!!include_body' text=$ShowBody$>        <$transclude tiddler={{$:/state/Menu/$MenuName$/current}} mode=block/>    \end

Adding an Expandable Contents

Adding an Expandable Contents to a TiddlyWiki

Styles

Developer

Maker

Musician

Miscellany