Collapse and expand headings in a tiddler

119 views
Skip to first unread message

Sandip Deshmukh

unread,
Aug 27, 2021, 11:23:22 PMAug 27
to TiddlyWiki
ReadThisLongManual tiddler carries this:

! Heading1

{{||PartOne}}

{{||PartTwo}}

!! Heading 2

Some text under the heading

{{||PartThree}}

When rendered, there will be several headings. Some of these will come from the transcluded templates.

Is there a way to collapse/ expand these headings at will? So, while viewing, either clicking on the heading will collapse/ expand it or there is a tiny button next to it that will do the collapse/ expand?

Mohammad Rahmani

unread,
Aug 28, 2021, 4:20:43 AMAug 28
to tiddl...@googlegroups.com
Have a look at Shiraz!

See display on demand
See FAQ and how it works (open/closed status)

you will see some good solutions there!


Best wishes
Mohammad


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e01b20cd-a2f0-4a72-9f8a-55206be6dcc8n%40googlegroups.com.

Sandip Deshmukh

unread,
Aug 28, 2021, 7:52:29 AMAug 28
to TiddlyWiki
Hello Mohammad,

Thanks.

But that is not what I was looking for. I wanted the headings to collapse/ show on their own.

Shiraz - Display on Demand will require me to add html tags to every heading. That would be too cumbersome.

Mohammad

unread,
Aug 28, 2021, 11:56:18 AMAug 28
to TiddlyWiki
So, you want a kind of outlining! each heading if collapsed then all contents under that heading shall be hidden until you expand that heading again!

Lets see what other says! but I think if we do not go with JS, one solution is to have a view template to get the text field
analysis it and then display the content with collapsible heading! You can decide if only first heading shall be collapsible or first and second etc.

What I proposed in Shiraz also work, but using display on demand makes this manual! 

I may recommend to have a look at https://links.tiddlywiki.com/

Best wishes

Paul Hampshire

unread,
Aug 28, 2021, 12:14:32 PMAug 28
to TiddlyWiki

Charlie Veniot

unread,
Aug 28, 2021, 2:41:45 PMAug 28
to TiddlyWiki
Hello,

Just a code sample in case of any use.  It is just me imagining how I'd create a basic setup to get started.  A little bit rough around the edges.

Download the attached and drag it into https://tiddlywiki.com/ for importing and checking out.

Screenshot below fyi.

Cheers!

Screenshot 2021-08-28 3.40.35 PM.png
SampleForSandip.json

Charlie Veniot

unread,
Aug 28, 2021, 2:49:15 PMAug 28
to TiddlyWiki
BTW, please remember: anything cosmetically disagreeable can be easily adjusted via some quick CSS adjustments.

For example: different border setup or no borders, background colors, indent of sections within other sections, etc. etc.

That code demo is very rough around the edges, just to prototype a design possibility.

David Gifford

unread,
Aug 28, 2021, 6:54:34 PMAug 28
to TiddlyWiki
Everyone always forgets the simplest solution to this. The HTML details disclosure element.

<details><summary><b>Your section header</b></summary>

{{Your transcluded tiddler}}

</details>

Sandip P. Deshmukh

unread,
Aug 29, 2021, 2:17:09 AMAug 29
to tiddl...@googlegroups.com, David Gifford

@Charlie,

Thanks a lot. The example you showed nearly does what I wanted.

But to implement it, I will need to do more than write simple wikitext.

I was looking to solution like Emacs org-mode Visibility Cycling.


@David

Thanks a ton!

Your code snippet came in handy for something else that was bothering me.  And that is solved now.

But for collapse/ expand headings, it requires additional markup. That would be too cumbersome to implement.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/zSGdj_P1yas/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9460266c-364b-43d2-af1c-edef7e7fd53fn%40googlegroups.com.
--
Regards,
Sandip P Deshmukh
Email: deshmuk...@gmail.com

Charlie Veniot

unread,
Aug 29, 2021, 11:39:51 AMAug 29
to TiddlyWiki
Hoo Nelly, I'm not an Emacs Org-Mode guy, so that is all gobbledygook to me.

There is a sweet spot for adequate WikiText:
  • complex WikiText formatting markup is bad
  • not enough simple WikiText formatting markup is bad
  • too much simple WikiText formatting markup is bad
  • not enough depends on the person; too much also depends on the person
That can be a drag when one needs some complicated formatting that isn't available in WikiText (or whatever markup).

But having to fall back on HTML/CSS isn't so bad.  With TiddlyWiki, it can be plug and play.  Grab somebody else's HTML/CSS, drop it in some tiddlers, and forget about it.

Ideally, any HTML (well, anything particularly complicated/messy) you do need can be put in a template tiddler, and then it is just a matter of applying that template anywhere you need via the beauty of transclusion and then you never need to put your eyeballs on that HTML again.  Well, maybe once in a blue moon when really necessary.

Yeah, I go bananas for transclusion ...

Paul Hampshire

unread,
Aug 29, 2021, 5:50:24 PMAug 29
to TiddlyWiki
To add to what @David Gifford said I've been tinkering with the details html element today. They documentation I was reading said it didn't support any attributes besides open/close.

BUT...  I discovered SUMMARY which is used to change it's name DOES.

<details>
<summary style="background-color:green;color:white;font-weight:bold;width:220px;">TESTING DETAILS STYLES</summary>

Testing a bunch of testing text. a bunch and more and more and more.
</details>

Charlie Veniot

unread,
Aug 29, 2021, 5:56:32 PMAug 29
to TiddlyWiki
Not only can summary be styled, but details can be styled too, as per this snippet from the tiddlers included in that earlier attachment of mine:

<details style="background-color:white;border:1px solid lightgray;">
  <summary style="font-size:1.5em;background-color:white;border:1px solid lightgray;">{{!!title}}<$link>*</$link></summary>

<$transclude tiddler=<<currentTiddler>> mode="block"/>
</details>

TW Tones

unread,
Aug 29, 2021, 10:38:38 PMAug 29
to TiddlyWiki
Actually the summary tag can contain wiki text.

I have used it to allow editing {{tiddlername||$:/core/ui/Buttons/edit}}

<details><summary>HelloThere {{HelloThere||$:/core/ui/Buttons/edit}}</summary>

{{HelloThere}}
</details>

I also use filtered transclusion to count something and display that in the summary so there is not need to open it if there are no cases (=0)
Or wrap the whole thing to optionally display

<$list filter="display condition" variable=nul emptyMessage="No details message">
<details><summary>HelloThere {{HelloThere||$:/core/ui/Buttons/edit}}</summary>

{{HelloThere}}
</details>
</$list>

Regards
Tones

Paul Hampshire

unread,
Aug 30, 2021, 9:20:32 AMAug 30
to TiddlyWiki
@ TW Tones

Is there a way for this to work with other wikitext after the closing summary? I use a lot of wikitext tables and mine isn't working. By that I mean my "HelloThere" for transclusion is a big table formatted using wikitext.

Charlie Veniot

unread,
Aug 30, 2021, 9:32:20 AMAug 30
to TiddlyWiki
G'day,

If you are using "{{}}" for transclusion, try the transclude widget instead with mode = "block" (i.e.  <$transclude tiddler=your_tiddler's_title mode="block"/>).

Paul Hampshire

unread,
Aug 30, 2021, 9:48:10 AMAug 30
to TiddlyWiki
  That worked! Thank you! I just had to put quotes around the tiddler title.


On Monday, August 30, 2021 at 9:32:20 AM UTC-4 cj.v...@gmail.com wrote:
G'day,

If you are using "{{}}" for transclusion, try the transclude widget instead with mode = "block" (i.e.  <$transclude tiddler=your_tiddler's_title mode="block"/>).



Charlie Veniot

unread,
Aug 30, 2021, 10:17:48 AMAug 30
to TiddlyWiki
Arg, sorry.  Forgot about the quotes.

I almost never specify a tiddler title with quotes.

For example, if transcluding a tiddler called "This_Tiddler", my transclude would look like this:

<$transclude tiddler={{ This_Tiddler!!title }} mode="block"/>


I'm an incessant tweaker by nature, so often change my tiddler titles to get them just right as tiddler content/scope/purpose evolves, and tiddler titles in quotes don't get changed upon save of a tiddler with the new title.

The Relink plugin, though, comes to the rescue as long as I reference titles as per that transclude sample above.

Flibbles

unread,
Sep 2, 2021, 11:51:02 PMSep 2
to TiddlyWiki
Hey all! So you should not need...

<$transclude tiddler={{ This_Tiddler!!title }} mode="block"/>

Relink has <$transclude tiddler /> already configured in its whitelist, so...

<$transclude tiddler="This_Tiddler" mode="block"/>

should work just fine. No need for weird syntax gymnastics.

-Flibbles

Charlie Veniot

unread,
Sep 3, 2021, 12:02:48 AMSep 3
to TiddlyWiki
I might be a little bit slow upgrading Relink in all of my TiddlyWikis ...
Reply all
Reply to author
Forward
0 new messages