[tw5] Collapse and expand headings in a tiddler

Sandip_Deshmukh · August 28, 2021, 3:23am

ReadThisLongManual tiddler carries this:

! Heading1

!! Heading 2

Some text under the heading

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 · August 28, 2021, 8:20am

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!

Sandip_Deshmukh · August 28, 2021, 11:52am

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 · August 28, 2021, 3:56pm

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

PaulH · August 28, 2021, 4:14pm

I’m just starting to learn CSS but shouldn’t this be possible with a stylesheet?

https://tiddlywiki.com/#Headings%20in%20WikiText

https://www.w3schools.com/cssref/sel_hover.asp

Charlie_Veniot · August 28, 2021, 6:41pm

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!

SampleForSandip.json (2.13 KB)

Charlie_Veniot · August 28, 2021, 6:49pm

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.

DaveGifford · August 28, 2021, 10:54pm

Everyone always forgets the simplest solution to this. The HTML details disclosure element.

Your section header

Sandip_Deshmukh · August 29, 2021, 6:16am

@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 the Google Groups “TiddlyWiki” group. To unsubscribe from this group and stop receiving emails from it, send an email to . To view this discussion on the web visit .

Charlie_Veniot · August 29, 2021, 3:39pm

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 …

PaulH · August 29, 2021, 9:50pm

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 · August 29, 2021, 9:56pm

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>

<$transclude tiddler=<> mode=“block”/>

TW_Tones · August 30, 2021, 2:38am

Actually the summary tag can contain wiki text.

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

HelloThere {{HelloThere||$:/core/ui/Buttons/edit}}

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”>

HelloThere {{HelloThere||$:/core/ui/Buttons/edit}}

</$list>

Regards
Tones

PaulH · August 30, 2021, 1:20pm

@ 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 · August 30, 2021, 1:32pm

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”/>).

PaulH · August 30, 2021, 1:48pm

That worked! Thank you! I just had to put quotes around the tiddler title.

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 · August 30, 2021, 2:17pm

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 · September 3, 2021, 3:51am

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 · September 3, 2021, 4:02am

I might be a little bit slow upgrading Relink in all of my TiddlyWikis …