Expand All / Collapse All In my TOC Tiddler

1

So far I haven’t seen such a thing in my online searches… It would be great to have a Collapse All and Expand All icon in my TOC tiddler. I’m a huge treeview nerd so my wikis have some pretty hefty TOCs in them :slight_smile:

I may be able to figure out the JS I would need to pull this off, but haven’t yet done any JS coding within TW. If there isn’t already such a beast, maybe someone is aware of something similar-ish enough to be a good starting point in figuring out how I might be able to pull this off.

Thank you in advance!

2

I asume you are using one of the standard toc macros?

I belive Various state tiddlers change or exist each time you open and close a branch.

It should be trivial to create a couple of buttons to do this with tiddlywiki script. If no one else shares some I will create some.

3

There is no javascript involved in the TOC macros. It’s all wikitext.

There are different toc macros which can be seen at: https://tiddlywiki.com/#Table-of-Contents%20Macros%20(Examples)

tiddlywiki.com uses toc-selective-expandable to show the toc.

The easiest way would be if you switch between toc and toc-selective-expandable with the click of a button.

It will look a bit different, since the toc macro does not show any open/closed chevrons. But they are useless if all expanded.

The complex way will be a bit trickier. TW remembers every state of every open/close chevron in a $:/state/toc-* tiddler. To collapse all toc paths, it would be needed to either delete them, or set their text to “close”. That’s straight forward.

To expand them all, imo the easiest way will be to modify the filter of the <$qualify name="toc-state" macro, that calculates the unique state-tiddler names. So if an expand-tiddler is set to open/close, it should use this one instead of the 100++ of unique state tiddlers needed otherwise.

I’ll have a closer look.

4

Yes, I am using the standard toc macros.

5

Thank you so much for the info - I’ll have to do some exploring :slight_smile:

6

I was just wondering if this were changed to use an index in a fixed data tiddler, it could only contain the tiddler titles that are the exception eg; open/closed.

  • The default state would be when the tiddler has no index and the other when it has an index.
  • In one direction we delete the whole data tiddler
  • In the other we gather all titles with children and add them to the data tiddler
    • The tagging tree operator would help here.
7

That’s not backwards compatible and will never be merged into the core.

We already do have a list of $:/state/toc/ tiddlers. It’s easy to remove them. tiddlywiki.com has a toc, where elements are part of different toc-paths, since many tiddlers have 2 or more tags. It needs to be possible, to expand them individually. So 1 index is not enough.

It’s possible to open 2 or more tiddlers in the story-river that contain the same tocs, where open / close still needs to work independently.

My suggestion to modify the $qualify filter is the simples one and should be backwards compatible. It only needs 1 new state tiddler to expand and open the whole tree, while keeping the existing states intact. So after the new open-all-state tiddler is removed, the existing configuration will be automatically restored.

The toc-macros maintain a path variable, that is used to create the unique states. In the future this variable can be used to expand and collapse elements of the toc that contains the tiddler which is selected in the story river. The selected tiddler could be highlighted in the toc.

The problem here is, that for tw-com this would open several toc-branches, since tiddlers have several tags. As I did extend the core toc-macro functions, I did not have an algorithm, that was able to create a unique “trail”, that would allow us to open only 1 specific toc-branch. Now with my trails- / bradcrumbs-plugin I do have an algorithm that probably could be used.

But that’s not implemented yet.

just some thoughts.

8

Some interestring ideas @pmario

To be clear I was not suggesting this, just considering ways to do it. In particular I think we could design an efficient solution to the topic, perhaps by only changing the state references.

  • As with any other macro(s) one can make there own, in effect fork the core one, and use a different name and have an alternative solution.
  • It is also an opportunity to explore new features.
  • It would be interesting to see if we can have multiple, interchangeable tree states. An example may be two or more windows with TOC’s maintaining different positions and configuration.
    • Helping navigate simultaneously, different threads in a complex hierarchy.
9

That’s already possible. If you open https://tiddlywiki.com/#TableOfContents you can also open it in a new window. So you will have 3 independent versions of the same toc in TW. The one in the story river. One in a new window and the TOC in the right sidebar. They all have their own states.

10

Yeah I usually have two different TOCs in my wikis - a Table of Contents and a Favorites tab.
I’m glad you mentioned the Path because that’s another topic that could be opened regarding the TOC, often I’m linking from one Tiddler to another and it would be nice to see that target Tiddler in the TOC when it’s opened.

I’ll have to do a bit of exploring and researching, so that I can get my head around the suggestions above :slight_smile:

11

you can create a ‘closeup’ button like so

<div class="tc-table-of-contents">
<$qualify name="xxxx" title=""> 
<$button>
<$list filter="[prefix[$:/state/toc/]suffix<xxxx>]">
<$action-setfield text="close"/>
</$list>
closeup
</$button>
</$qualify>
<<toc-selective-expandable 'TableOfContents'>>

</div>
12

OH! That works great! I’ll toy with the style etc of that button, maybe make it into an icon etc. But that is exactly what I needed!

Now I just need to research how that works etc. :slight_smile:

14

more simply:

<$button>
<$list filter="[prefix[$:/state/toc/]suffix<qualify>]">
<$action-setfield text="close"/>
</$list>
closeup
</$button>
<div class="tc-table-of-contents">
<<toc-selective-expandable 'TableOfContents'>>
</div>
15

Here a complete solution including ‘expand all’

\widget $reveal(state,type,text,stateTitle)
<$genesis $type="$reveal" $remappable="no" state =<<state>> stateTitle=<<stateTitle>> type=<<type>>  text=<<text>> default=`$(defaultsTo)$`><$slot $name="ts-raw" /></$genesis>
\end

<$vars defaultsTo="close">
<$button set=<<qualify"$:/state/openmenu">> setTo="close">closeup<$list filter="[prefix[$:/state/toc/]suffix<qualify>]"><$action-setfield text="close"/></$list></$button>
<$reveal type="match" state=<<qualify"$:/state/openmenu">> text="close">
<$button set=<<qualify "$:/state/openmenu">> setTo="open">expand <$list filter="[prefix[$:/state/toc/]suffix<qualify>]"><$action-setfield text="open"/></$list></$button>
</$reveal>
</$vars>
<$vars defaultsTo={{{[<qualify "$:/state/openmenu">get[text]]}}}>
<div class='tc-table-of-contents'>
<<toc-selective-expandable 'TableOfContents' >>
</div>
</$vars>
16

more simply

\widget $reveal(state,type,text,stateTitle)
<$genesis $type="$reveal" $remappable="no" state =<<state>> stateTitle=<<stateTitle>> type=<<type>>  text=<<text>> default=`$(defaultsTo)$`><$slot $name="ts-raw" /></$genesis>
\end

<$button set=<<qualify"$:/state/openmenu">> setTo="close">closeup<$list filter="[prefix[$:/state/toc/]suffix<qualify>]"><$action-setfield text="close"/></$list></$button>
<$button set=<<qualify "$:/state/openmenu">> setTo="open">expand <$list filter="[prefix[$:/state/toc/]suffix<qualify>]"><$action-setfield text="open"/></$list></$button>

<$vars defaultsTo={{{[<qualify "$:/state/openmenu">get[text]]}}}>
<div class='tc-table-of-contents'>
<<toc-selective-expandable 'TableOfContents' >>
</div>
</$vars>
17

Thank so much you for these! I’ll try the latest variant tonight.

18

Oh, that’s an interesting approach. I did forget about the genesis widget. Will have to have a closer look.

Thanks for sharing

19

That works great!

Thank you SO much!

20

I admit I never really oriented to the genesis widget. This gives me a nice glimpse of its power!