Hello Experts,
I try to make a Zettelkasten for my wife and parents.
Each of us are using individual tiddler with individual table of contents.
For some reasons my wife want to have her table of content horizontal (she will use only 5 entries).
Is that possible to configure it? I checked the documentation but I didn’t find a solution or an alternative.
Thx in advance
Stefan
The table of contents macros are documented with examples but the key value is they generate a contents table which can be a wide and deep hierarchy.
The idea of only 5 entries and horizontal is a little confusing.
Can you just use a list of items with the relevant tag?
<$list filter="[tag[TableOfContents]]"><$link/> | </$list>
Alternatively perhaps you are thinking of the tabs macro?
I take no responsibility for the damage done by this macro monstrosity
Make a new tiddler and give it the tag: $:/tags/Macro
Paste the following code and save:
\define TOC-H(type:"toc", tag)
<div class="tc-table-of-contents horizontal">
<<$type$ """$tag$""">>
</div>
<style type="text/css">
.tc-table-of-contents.horizontal > .tc-toc {
display: flex;
flex-wrap: wrap;
column-gap: 1.5em;
row-gap: 2.5em;
}
.tc-table-of-contents.horizontal > .tc-toc > .toc-item .tc-toc {
border-left: 1px solid <<colour foreground>>26;
margin-left: 0.2em;
padding-left: 0.65em;
}
.tc-table-of-contents.horizontal .tc-tabbed-table-of-contents {
display: flex;
flex-direction: column;
}
.tc-table-of-contents.horizontal .tc-tabbed-table-of-contents > .tc-table-of-contents {
max-width: 100%;
}
.tc-table-of-contents.horizontal .tc-tabbed-table-of-contents > .tc-table-of-contents > .tc-toc.toc-selective-expandable {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 1em;
row-gap: 2.5em;
max-width: 100%;
}
.tc-table-of-contents.horizontal .tc-tabbed-table-of-contents > .tc-table-of-contents > .tc-toc.toc-selective-expandable .toc-item .tc-toc.toc-selective-expandable {
border-left: 1px solid <<colour background>>80;
margin-left: 0.75em;
padding-left: 0.5em;
}
</style>
\end
! Examples!
!! toc !
<<TOC-H tag:"Contents">>
!! toc-expandable !
<<TOC-H type:"toc-expandable" tag:"Contents">>
!! toc-selective-expandable !
<<TOC-H type:"toc-selective-expandable" tag:"Contents">>
!! toc-tabbed-internal-nav !
<<TOC-H type:"toc-tabbed-internal-nav" tag:"Contents">>
Here’s a visual…
You can choose the TOC type:
<<TOC-H tag:"Contents">>
<<TOC-H type:"toc-expandable" tag:"Contents">>
<<TOC-H type:"toc-selective-expandable" tag:"Contents">>
<<TOC-H type:"toc-tabbed-internal-nav" tag:"Contents">>
this was a really quick test just to see how it would look, you will probably have to play with the styles to get it ready for actual use
Hi TW_Jones,
thank you for your recommendation. I read the documentation carefully and the tabs macro is looking fine, yes.
But, and correct me if I am wrong, the tabs macro has only one level. It is not like the toc that it is showing the next level by clicking the item?
Thank you so far
Stefan