Tabs Without Extra Tiddles

#1

Hi Guys!

It’s possible to create tabs directly inside tiddles without creating a new tiddle for every tab?

For example i have a database of D&D and for now i create five tiddles for each one of 264 monster, so its about 1320 tiddles! And i have one tiddle to aggregate the five pieces of information using the code:

<<tabs tabsList:[field:monstro[Aarakocra]sort[ordem]]>>

It’s hard to manage, but not impossible. If anyone have some suggestions i appreciate!

Thanks in advance!
Beste Regards

1 Like
#2

The tabs macro is designed to tabify tiddler content, but is itself made up of buttons and other formatting as in html. Rather than use the tabs macro you can build it up from html, search the internet or ask a LLM Chat bot for the html code to build tabs.

For example;

  <style>
    .tabs {
      display: flex;
      flex-direction: column;
      width: 300px;
      font-family: sans-serif;
    }

    .tab-labels {
      display: flex;
    }

    .tab-labels label {
      padding: 10px;
      background: #ccc;
      cursor: pointer;
      border: 1px solid #aaa;
      margin-right: 2px;
    }

    .tab-content {
      border: 1px solid #aaa;
      border-top: none;
      padding: 10px;
      background: #f9f9f9;
      display: none;
    }

    input[type="radio"] {
      display: none;
    }

    #tab1:checked ~ .tab-labels label[for="tab1"],
    #tab2:checked ~ .tab-labels label[for="tab2"],
    #tab3:checked ~ .tab-labels label[for="tab3"] {
      background: #eee;
      font-weight: bold;
    }

    #tab1:checked ~ .content1,
    #tab2:checked ~ .content2,
    #tab3:checked ~ .content3 {
      display: block;
    }
  </style>

  <div class="tabs">
    <input type="radio" name="tabs" id="tab1" checked>
    <input type="radio" name="tabs" id="tab2">
    <input type="radio" name="tabs" id="tab3">

    <div class="tab-labels">
      <label for="tab1">Tab One</label>
      <label for="tab2">Tab Two</label>
      <label for="tab3">Tab Three</label>
    </div>

    <div class="tab-content content1">
      <p>This is the content for Tab One.</p>
    </div>
    <div class="tab-content content2">
      <p>This is the content for Tab Two.</p>
    </div>
    <div class="tab-content content3">
      <p>This is the content for Tab Three.</p>
    </div>
  </div>
#3

The tabs macro takes in two parameters you can use to just set the tabbed header…

  • the tabsList parameter can actually be set with a list of values (eg “[[tab1]] tab2 …”)
  • the state parameter is where the selected tab is stored…

After that you can use <%if > conditional shorthand to show content under the tab depending on the value in that state tiddler. All of the “tab” content can be in one tiddler then either directly with the tabs or transcluded from another tiddler.

I haven’t tested this - but I’m sure I’ve done similar before…

:smile:

#4

Try this:

Create a tiddler with title “Aarakocra”. Enter the following content:

<% if [<currentTab>match[]] %>
<<tabs tabsList:"one two three four five" template:"Aarakocra">>
<% elseif [<currentTab>match[one]] %>
TAB one CONTENT
<% elseif [<currentTab>match[two]] %>
TAB two CONTENT
<% elseif [<currentTab>match[three]] %>
TAB three CONTENT
<% elseif [<currentTab>match[four]] %>
TAB four CONTENT
<% elseif [<currentTab>match[five]] %>
TAB five CONTENT
<% endif %>

Notes:

  • The tabsList param should contain the tab LABELS you want to display (i.e., NOT tiddler titles)
  • The template param is the same as the TITLE of the tiddler that contains the <<tabs>> macro

What happens:

  • The <% if %> conditional syntax is used to determine which content to display, based on the currentTab value.
  • When displaying the “Aarakocra” tiddler in the StoryRiver, the currentTab value will not be set, so the <<tabs>> macro is rendered.
  • Then, when a tab is selected, the “Aarakocra” tiddler is used as the “content template”; but this time, the currentTab value is set to the selected tab’s label text, so the corresponding tab content is displayed.

To define additional monsters, just clone the above syntax to create a new tiddler, set the template param to match the new tiddler’s title, and enter the desired content into each part of the conditional syntax.

enjoy,
-e

5 Likes
#5

Very clever solution! I did a little cheating and I see, this also works:

<% if [<currentTab>match[]] %>
<<tabs tabsList:"[tag[HelloThere]]" template:"Aarakocra">>
<% else%>
<$transclude $tiddler=<<currentTab>> $mode="block"/>
<% endif %>
1 Like
#6

Since you are transcluding the <<currentTab>> tiddler, there is no need to use a template param because the default handling for the <<tabs>> macro automatically does the transclusion for you, so the following will produce the same result:

<<tabs tabsList:"[tag[HelloThere]]">>

-e

1 Like
#7

Amazing! This works like a charm!

Thank you all, this comunity is incredible

2 Likes