Collapsible and Expandable Headings on Their Own

There was a request here [tw5] Collapse and expand headings in a tiddler to have collapsible headings in Tiddlywiki specially when a tiddler is created from transclusion of several other tiddlers!

This behavior is seen in Word Processors like Ms Word!

Some solutions were given in the above thread, but the question is how one can have collapsible heading without all those scripting inside tiddler!

In other words, is it possible to use CSS or JS to have collapsible heading by their own!

https://giffmex.org/gifts/subsume.html

It’s literally just <<subsume “tiddler title”>> or <<subsume-edit “tiddler title”>>

I have a “ddg” plugin that I have not formally offered to the TW community, but it looks like this

<<ddg note:"" footnote:"">>

note = text to be visible, including formats
footnote = text to be transcluded, or {{tiddler title to be transcluded}}
can also add inbetween these, ref:"" (= what you want as the footnote indicator. Default is “+”

See instructions at — Filipenses giffmex

1 Like

You can do it with a macro like subsume or with a template with html element details. With both you can use it in list widget.

for example:

<$list filter="[tag[MyTag]]">
<$macrocall $name="subsume" tid=<<currentTiddler>> />
</$list>

OR

<$list filter="[tag[MyTag]]">
{{||MyTemplate}}
</$list>
2 Likes

Hi Dave,
Is this means one has to put each section inside a tiddler?

@Alvaro

I cannot understand how you do the job!

Example

! Hello
This is a test ....

!! Headinh ii
I am another section
!! Headinh ii two
I am another section  and third part

! Good bye
!! Heading ii three
I am another section  and third part
!!! Heading iii one
Here is also some paragraphs

Then on rendering I need to be able to collapse heading two for example!

If you developed a template then we can use it as view template and it should ne no need to call macros etc.

Yes, the Subsume plugin transcludes one tiddler inside another tiddler inside a details element, adds the transcluded tiddler title as the details summary, and adds either a link or an edit button to the transcluded tiddler for easy access.

<<subsume “Tiddler title for heading 1”>>

The ddg tiddlers are a bit different: The note appears as if it were a regular line of text. You can even add formatting. The footnote is either more text you add inside the macro call, or a transclusion in the macrocall, which then appears as the contents of the details element.

<<ddg note"Hi Mohammad, I would //love// to visit Iran." footnote:"{{Map of Iran}}">>

If you have the Subsume plugin installed, Alvaro’s fix lets you shorten the process even more. It will list every tiddler that meets the filter parameter and display them as Subsumes.

1 Like

Thank you David!
I got how it works now!

1 Like

Sorry, I missunderstan you.

Yes I think that it is possible with js (and css for style), but i don’t know if it works well with how TiddlyWiki parses the text and its wikirules. And I don’t know how solve it. This part of TW is unknown for me.

Mohammand,

I am aware of an opportunity to achieve what you ask.

As you may be aware the rendering process in tiddlywiki generates HTML. You can see what this looks like if you install the internals plugin and use the HTML preview. The HTML is generated after all transclusions, wikitext and widgets are “interpreted”. You can use the wikify widget output=html to generate this in a variable, and then you can interrogate this resulting html. Such html then may consists of <Hn>title</Hn> tags, followed by content then the next heading tag. This html result could be “parsed” and represented as slider content, perhaps from another tiddler, or from the view template.

If I understand the original request, The trick is to hide and toggle all other content not a heading by clicking on a heading. In many ways this could be simplified if the content to be toggled was identified by the author by wrapping it in a tag. eg div and giving in a HTML ID for which one can toggle the CSS “display: none;” but of course you are suggesting a “native html” solution. If this is the case I would explore the native HTML and CSS solutions to achieve what you are asking, then find how to retrofit it to TiddlyWiki

Tones
Good guidelines! I will go through it and see how I can achieve this!

Yes, I mean no friction and no need for extra code and macros by user! Everything should be behind the scene and user can use just normal wikitext!

Mohammad,

My macros were meant to reduce friction for users. They are meant to be used with an editor toolbar button, and both come with that.

User process:

Create a section with slider:

  1. Click subs-e button

  2. Add “section” tiddler title XYZ

  3. Save changes.

  4. Click edit button that appears to the right of section XYZ

  5. Start writing the content in the XYZ tiddler

Add hidden content under a snippet of regular text:

  1. Click ddg button while writing in XYZ

  2. In the “note” part of the <<ddg>> macrocall, write the text that will appear in XYZ.

  3. In the “footnote” part of the <<ddg>> macrocall, write the text that will be hidden in the slider. Can be short or long. If the user feels comfortable with transclusion, they can just put {{tiddler title}} in the footnote section and open that tiddler to write the hidden content.

  4. Save changes.

Maybe when I get time I can do a short video. But it’s really easy and intuitive. And uncluttered: The main tiddler only shows a few <<subsume>> macrocalls, and the section tiddler (XYZ) has regular text interspersed with short <<ddg>> macrocalls. Sections are easy to change later, with the edit button in the section sliders (subsumes). And ddg’s are easy to change later, right where they are in the text.

Hi David,
That is really simple! So we can keep outline in one tiddler and then click on any title to edit the related tiddler and fill in with text!

Thank you!

1 Like

@DaveGifford FYI I edited your last reply to highlight transcludes and macros with the code button. This is actually necessary in Discourse for <<macronames>> which is not marked as code look like this <>

I installed and tried the subsume plugin and like it a lot. Is there anyway to customize the summary message (instead of the tiddler title) like in the details widget <$details> widget?

Thanks for that, Tones! I will review the guidelines so you don’t have to follow around to edit my posts.

Yes you can, Pak.

Click the magnifying glass next to the search window. Choose the system tab in $:/AdvancedSearch. paste and search for $:/plugins/giffmex/subsume. In that tiddler, Click the contents tab. Open $:/plugins/giffmex/subsume/macro. Replace <$view tiddler="$tid$" field="title"/> with whatever you want your text to be. If you use the subsume-edit, make the same change in $:/plugins/giffmex/subsume/macro/subsume-edit

1 Like

Thank you. I modified it to show the caption field (if exists) otherwise fall back to the title field. Works great :slight_smile:

Here is the code if anyone is interested:

\define subsume(tid:"") <details><summary><$tiddler tiddler="$tid$"><$view field="caption">{{!!title}}</$view></$tiddler><$link to="$tid$">&nbsp;&nbsp;*&nbsp;</$link></summary><span class="indent1"><$transclude tiddler="$tid$" field="text" mode="block"/></span></details>
1 Like

For readability, especially here in Discourse, I strongly recommend using the multi-line form of macro definition, with liberal use of indentation, like this:

\define subsume(tid:"")
<details>
   <summary>
      <$tiddler tiddler="$tid$">
         <$view field="caption">{{!!title}}</$view>
      </$tiddler>
      <$link to="$tid$">&nbsp;&nbsp;*&nbsp;</$link>
   </summary>
   <span class="indent1">
      <$transclude tiddler="$tid$" field="text" mode="block"/>
   </span>
</details>
\end

-e

4 Likes