How to create nested tabs?

#1

Hi all,

I was looking through the shiraz tutorial and found this presentation style really useful for me to organize tiddlers (see pictures attached).

nested tabs
nested tabs818×720 82.6 KB

I did some research and think this might be called nested tabs? Wonder if anyone could point me to the resource codes to set up it? I’d greatly appreciate it!

Basically, say if I have 4 tiddlers, A1, A2, B1, B2

  1. How do I put them as A and B tabs on the vertical bar, and A1 & A2 on the horizontal bar when I click on the A tab?

  2. How do I order A1 & A2 (…) so that I can make them appear in the order following my specific list (not numerical order, say if I want A4 first, followed by A8 etc.)?

  3. Can I reference a particular section of a tiddler (or a “details label” in a Shiraz entry) instead of the entire tiddler to put in A1?

I initially thought this might require works through sidebars and my attempts so far have failed, not sure if that’s the way to explore. Thanks a lot!

1 Like
#2

The simplest way is a set of tiddlers with a tag and the tabs macro, each tab transcludes a tiddler, which just happens to include the tab macro again.

I assume you reviewed the tabs Macro doco?

Actually you can have 7 tiddlers. Top, A and B containing a tabs macro for the X1 and X2 tabs.

Of course with a little fiddling you can get smart and add this all to the view template and automate it.

1 Like
#3

Replying from a different direction: just take a peek under the hood at that Shiraz tutorial that you admire. The vertical tab set is like this:

<<tabs tabsList:"[tag[demo]!tag[advanced]]" default:"Tutorial Alerts" class:"tc-vertical">>

and your screenshot shows the images tab is selected (from that outer set), and within it the images tab is displaying its contents, as follows:

<<tabs tabsList:"[tag[image]!tag[advanced]prefix[demo]]" default:"demo/image-macro" class:"tc-horizontal">>

Note that the order of tabs (at least in typical cases where the filter relies on a tag) is determined by the list field for that tag. So, clicking on the image tagpill (use the More sidebar menu to browse tags, if the tagpill for “image” is not otherwise ready at hand) allows you to drag the various tiddlers. You’ll see those tabs rearrange themselves right away as you change their order this way.

On your third question, I’m not fully versed in development on tiddler “Sections” – but you can certainly use a template so that the contents of a tab display in some form other than showcasing their text field: https://tiddlywiki.com/#tabs%20Macro

-Springer

3 Likes
#4

I think this is a good question. I’ve been thinking about this direction too. The diagram shows the tabs macro code written under each entry. This is fine for a hierarchy of only two or three levels. But suppose I have a five level content, or even more, do I have to go through and write the syntax of the tabs macro for each level? I think this can be avoided entirely. Because we have a table of contents macro. But the tabs macro only shows the usual jump links.

I would like to write a string of code in just one entry and then I can achieve the effect in the diagram. I know there is navigation in the catalogue macro, but that doesn’t work as well as the one shown in the diagram. I’m now trying to find more ways to achieve this as well.

image
image1572×975 132 KB

Of course I could also be looking in the wrong direction.