Collapse and expand headings in a tiddler

[Sandip Deshmukh]

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]

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]

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]

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]

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

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover2

[Charlie Veniot]

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!

[Charlie Veniot]

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]

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]

@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]

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]

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]

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]

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]

@ 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]

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]

  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]

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]

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]

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