Any idea how to collapse/expand section within a tiddler

4,169 views
Skip to first unread message

James

unread,
Sep 22, 2015, 10:39:20 PM9/22/15
to TiddlyWiki
Hi all,
Is there any ways we can collapse/expand the content in the section by clicking on the heading?

Eric Shulman

unread,
Sep 23, 2015, 12:32:12 AM9/23/15
to TiddlyWiki
On Tuesday, September 22, 2015 at 7:39:20 PM UTC-7, James wrote:
Hi all,
Is there any ways we can collapse/expand the content in the section by clicking on the heading?

Use a <$button> widget with class="tc-btn-invisible" to create the heading.  Surround the section content with a corresponding <$reveal> widget.

<$button class="tc-btn-invisible" popup=<<qualify "$:/temp/popup">>>

!heading text
</$button>
<$reveal type="nomatch" state=<
<qualify "$:/temp/popup">> text="">

section content goes here
</$reveal>

enjoy,
-e
Eric Shulman
ELS Design Studios
TiddlyTools - "Small Tools for Big Ideas!"
InsideTiddlyWiki: The Missing Manuals

YOUR DONATIONS ARE VERY IMPORTANT!
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:

Tobias Beer

unread,
Sep 23, 2015, 3:08:51 AM9/23/15
to tiddl...@googlegroups.com
Hi Eric,
 
Use a <$button> widget with class="tc-btn-invisible" to create the heading.  Surround the section content with a corresponding <$reveal> widget.

I tried to wrap this inside a macro but it has its limitations:


issues
i1) Only one section can be shown at a time?

testing the macro below
click link to open result: Test:
<<fold "!Section One" """and here
comes the content""">><br>
<<fold "!Section Two" """has entirely
different content""">>
a macro to fold sections
$:/.tb/macros/fold:
\define fold(heading, text)
<$button class="tc-btn-invisible" popup=<<qualify "$:/state/section$heading$">>>

$heading$
</$button>
<$reveal type="nomatch" state=<<qualify "$:/state/section$heading$">> text="">

$text$
</$reveal>
\end
Best wishes,

— tb

webcorerad

unread,
Jan 20, 2017, 5:05:24 PM1/20/17
to TiddlyWiki
This is awesome! Thanks for sharing Tobias.
The only problem i'm having is there's no way to know that a header can be expanded (or in other words that it hides some content).
Is it possible to make it work like is shown here ( http://tiddlywiki.com/#TableOfContents:TableOfContents) for the table of contents with "arrows" pointing to the right or down depending if the header's content is collapsed or expanded?
The more i read about TiddlyWiki the more impressed i am... problem is i have no clue yet how to "code" these things/funcionality :(

Thomas Elmiger

unread,
Jan 22, 2017, 12:42:48 PM1/22/17
to TiddlyWiki
Hi folks!

As mentioned in my other post there is a new <details> and <summary> structure in HTML 5. And I just finished my details widget to use it TW-style. As always with TW, you could code this by hand – then you would maybe like to look at my styles and copy the structure with an additional <span>:

<details class="tc-details">
   <summary>Open here!</summary>
   <span>This is the revealed content</span>
</details>

This covers also the arrow feature @webcorerard asked for.

All the best!
Thomas

Rick Yagodich

unread,
Oct 4, 2019, 10:03:31 AM10/4/19
to tiddl...@googlegroups.com
I've just implemented my own macro derived from this, but it has an issue, which turns out is present in this sample, too. Clicking anywhere on the expandable portion of the fold collapses it down to the title. Indeed, clicking anywhere else in the TW closes it down. It doesn't seem to matter than I'm setting the state for each instance based on the name of the imported tiddler. Only once of them can be open at a time, and clicking anywhere…

How do I ensure that only the intended <$button> is a trigger to open/close the fold?

A Gloom

unread,
Oct 4, 2019, 11:09:35 PM10/4/19
to TiddlyWiki
I checked the macro out and duplicated your issue as well-- not fully familiar with the mechanisms used (quality)

When the macro unfolds section 1 it writes " (43,136,154,76) " to the "$:/state/Section One--(string of numbers)" and when clicking on section 2 changes it to another set of 4 numbers-- but when clicking outside of either section, the state tiddler disappears completely.

Rick Yagodich

unread,
Oct 5, 2019, 9:50:56 AM10/5/19
to tiddl...@googlegroups.com
OK, I have now got a version that actually works (slimmed down version - mine uses FontAwesome icons and has an edit-from-controller link, too)

\define fold(content)
<$set name="controller" value="$:/state/$(currentTiddler)$/section/$content$">


<$reveal type="nomatch" state=<<controller>> text="open">
  <$button class="tc-btn-invisible" set=<<controller>> setTo="open">
    <$transclude tiddler="$content$" field="caption" />  (closed)
  </$button>
</
$reveal>
<
$reveal type="match" state=<<controller>> text="open">
  <
$button class="tc-btn-invisible" set=<<controller>> setTo="close">
    <
$transclude tiddler="$content$" field="caption" />  (open)
  </$button>
</
$reveal>

<$reveal type="match" state=<<controller>> text="open">

<$transclude tiddler="$content$" />

</$reveal>
</
$set>
\end

This allows the target content to be included as foldable on multiple tiddlers, or multiple targets within one tiddler, without any interference between their open/closed states. The only time there would be interference is if you're including the same content into a single parent multiple times, but that's your own fault.

Mohammad Rahmani

unread,
Oct 5, 2019, 11:39:40 PM10/5/19
to tiddl...@googlegroups.com
You may find two different version of slider in Tw-Scripts which works for this purpose.
Mohammad

On Sat, Oct 5, 2019, 5:20 PM Rick Yagodich <ri...@excolo.com> wrote:
OK, I have now got a version that actually works (slimmed down version - mine uses FontAwesome icons and has an edit-from-controller link, too)

\define fold(content)
<$set name="controller" value={{{ [[$:/state/]addsuffix<currentTiddler>addsuffix[/fold/]addsuffix<content>] }}}>



<$reveal type="nomatch" state=<<controller>> text="open">
  <$button class="tc-btn-invisible" set=<<controller>> setTo="open">
    <$transclude tiddler="$content$" field="caption" />  (closed)
  </$button>
</
$reveal>
<
$reveal type="match" state=<<controller>> text="open">
  <
$button class="tc-btn-invisible" set=<<controller>> setTo="close">
    <
$transclude tiddler="$content$" field="caption" />  (open)
  </$button>
</
$reveal>

<$reveal type="match" state=<<controller>> text="open">

<$transclude tiddler="$content$" />

</$reveal>
</
$set>
\end

This allows the target content to be included as foldable on multiple tiddlers, or multiple targets within one tiddler, without any interference between their open/closed states. The only time there would be interference is if you're including the same content into a single parent multiple times, but that's your own fault.

--
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/7c063182-5334-4172-bea1-9ce6d7941528%40googlegroups.com.

A Gloom

unread,
Oct 6, 2019, 2:30:32 AM10/6/19
to TiddlyWiki
OK, I have now got a version that actually works (slimmed down version - mine uses FontAwesome icons and has an edit-from-controller link, too)

Interesting... *stuffs macro in pocket when no one is looking* : )

Rick Yagodich

unread,
Oct 6, 2019, 3:50:57 AM10/6/19
to TiddlyWiki


On Sunday, 6 October 2019 07:30:32 UTC+1, A Gloom wrote:

Interesting... *stuffs macro in pocket when no one is looking* : )

If you want the edit-from-parent, insert this between $set and first $reveal (you'll need the FontAwesome plugin for it to work):

<span class="cs-fold-right"><$button>
 <$action-navigate $to="$content$" />
 <$action-sendmessage $message="tm-edit-tiddler" $param="$content$" />
<i class="fas fa-pen-square"></i>
</$button>
</span>


The accompanying referenced css is
}
.cs-fold-right {
  display
: inline-block;
 
float: right;
}


A Gloom

unread,
Oct 6, 2019, 3:29:01 PM10/6/19
to TiddlyWiki
Cool! *pockets code*  Do you have any more nifty code?

Rick Yagodich

unread,
Oct 6, 2019, 3:40:29 PM10/6/19
to TiddlyWiki
Only that same edit-from-parent applied to a buttonTemplate for the <<tabs>> macro… which is no different.

InflamedSebi

unread,
Dec 19, 2019, 12:32:05 AM12/19/19
to TiddlyWiki
Imma just leave this here:

\define fold(id, caption, content)
<$set name="controller" value={{{ [[$:/temp/state/]addsuffix<currentTiddler>addsuffix[/fold/]addsuffix[$id$]] }}}>

<$reveal type="nomatch" state=<<controller>> text="open">
  <$button class="tc-btn-invisible" set=<<controller>> setTo="open">
    ''$caption$'' {{$:/core/images/unfold-button}}
  </$button>
</$reveal>
<$reveal type="match" state=<<controller>> text="open">
  <$button class="tc-btn-invisible" set=<<controller>> setTo="close">
    ''$caption$'' {{$:/core/images/fold-button}}
  </$button>
</$reveal>

<$reveal type="match" state=<<controller>> text="open">

$content$

</$reveal>
</$set>
\end

instead of folding whole transcluded tiddlers this will only fold text. Folds with the same id inside the same tiddler, will share their state.
To make ids global instead of tiddler wide, change line 2 to:
<$set name="controller" value={{{ [[$:/temp/state/fold/]addsuffix[$id$]] }}}>

and the corresponding editor button just in case:
<$action-sendmessage
$message="tm-edit-text-operation"
$param="wrap-lines"
prefix='<<fold  "id" "caption" """'
suffix='""">>'
/>

and some example:
<<fold  "FoldExampleNo1" "Click me to view more :)" """
WOHOOOO Hidden Text!

!! This is great!

""">>



A Gloom

unread,
Dec 19, 2019, 3:10:05 AM12/19/19
to TiddlyWiki
InflamedSebi,

Very interesting-- I am finding myself unable to keep up with all the ideas everyone presents here : )

TonyM

unread,
Dec 19, 2019, 5:28:59 AM12/19/19
to TiddlyWiki
Don't worry more ideas will come along soon :)

CJ Veniot

unread,
Dec 19, 2019, 10:47:26 PM12/19/19
to TiddlyWiki
G'day,

I'm a rather big fan of Thomas Elmiger's Details Widget. (Just to put in a plug,  PUN! , from a humble user's perspective?)

I haven't pushed the plugin to the limit yet, but sneak a peek at my little project to see how I've experimented with Details Widget so far:  https://intertwingularityslicendice.neocities.org/

Really, I've never liked the concept of clicking on links and bouncing around between pages (or tiddlers).  So Details Widget is right awesome at handling super-sized tiddlers that are just about including a swath of other tiny tiddlers (i.e. supporting a Componentization approach to organizing information.)

Cheers !

Reet Pandher

unread,
May 19, 2020, 10:31:14 AM5/19/20
to tiddl...@googlegroups.com
Hi Tobias,

Sorry to bring up such an old issue.
Just wanted to check if there is any way to add a arrow indicator to the collapsed section to your macro code.
I tried a few other Macros which have the arrow feature but all of them remove the formatting of the heading text. So would there be a way to add an arrow in your macro?
Thanks!!

Eric Shulman

unread,
May 19, 2020, 10:50:04 AM5/19/20
to TiddlyWiki
On Tuesday, May 19, 2020 at 7:31:14 AM UTC-7, Reet Pandher wrote:
Just wanted to check if there is any way to add a arrow indicator to the collapsed section to your macro code.

Try this:
\define fold(heading, text)
<$reveal type="match" state=<<qualify "$:/state/section$heading$">> text="">

<$button class="tc-btn-invisible" popup=<<qualify "$:/state/section$heading$">>>


$heading$
{{$:/core/images/chevron-right}}

</$button>
<$reveal type="nomatch" state=<<qualify "$:/
state/section$heading$">> text="">

$heading$ {{$:/core/images/chevron-down}}
$text$
</$reveal>
\end

The difference from Tobias' macro is that it uses two $reveal widgets: the first one displays the "collapsed" heading with a right-pointing arrow, while the second one displays the "expanded" heading with a down arrow, followed by the actual expanded content.

let me know how it goes,

enjoy,
-e

Mat

unread,
May 19, 2020, 11:05:23 AM5/19/20
to TiddlyWiki
Reed and Eric

Incidentally I was just pondering over this earlier today. I don't have any answer but I think it ought to be possible to make a "markup" kind of thing that converts + characters into revealwidgets,ie

+foo
-bar
Lorem ipsum

Lorem ipsum
+baz
+


In the example, the "bar" is opened (i.e the preceding + was clicked). There is an extra + at the bottom of the list because, presumably, the thingy would need a closing delimiter which is normally the </$reveal>. Of course the thingy would need a little styling too, but that's secondary.

I think this would make a very neat addition to bullet lists and number lists. "Expansion lists".

How implement? Not a zilch of an idea.

<:-)

Reet Pandher

unread,
May 19, 2020, 11:08:15 AM5/19/20
to TiddlyWiki
Hi Eric,

I tried it and it displays the heading with the right arrow but when i click on the heading to expand text, no text appears and the heading disappears as well. When i click anywhere on the screen the heading re-appears.
I am using the same syntax to call the fold macro that tobias provided.

Eric Shulman

unread,
May 19, 2020, 11:28:45 AM5/19/20
to TiddlyWiki
On Tuesday, May 19, 2020 at 8:08:15 AM UTC-7, Reet Pandher wrote:
I tried it and it displays the heading with the right arrow but when i click on the heading to expand text, no text appears and the heading disappears as well. When i click anywhere on the screen the heading re-appears.


oops!  I left out a closing /$reveal and the $button wrapper around the second heading... here's the fixed macro:

\define fold(heading, text)
<$reveal type="match" state=<<qualify "$:/state/section$heading$">> text="">
<$button class="tc-btn-invisible" popup=<<qualify "$:/state/section$heading$">>>

$heading$ {{$:/core/images/chevron-right}}
</$button>
</$reveal>
<$reveal type="nomatch" state=<<qualify "$:/state/section$heading$">> text="">
<$button class="tc-btn-invisible" popup=<<qualify "$:/state/section$heading$">>>

$heading$ {{$:/core/images/chevron-down}}
</$button><br>
$text$
</$reveal>
\end

<<fold "test1" """this is a test""">>
<<fold "test2" """another test""">>

enjoy,
-e

Reet Pandher

unread,
May 19, 2020, 11:29:46 AM5/19/20
to TiddlyWiki

Reet Pandher

unread,
May 19, 2020, 11:44:12 AM5/19/20
to TiddlyWiki
Hi Eric,

Now it works but it completely removes the formatting of the hidden text!! 😭

Mat

unread,
May 19, 2020, 11:55:14 AM5/19/20
to TiddlyWiki
Reet Pandher wrote:
Now it works but it completely removes the formatting of the hidden text!! 😭

Try adding an empty row before the second button.

<:-)

Reet Pandher

unread,
May 19, 2020, 12:31:14 PM5/19/20
to TiddlyWiki
I didn't even create a second button though :(
All the formatting disappears the moment i enclose my text into the folds.

Reet Pandher

unread,
May 19, 2020, 12:45:35 PM5/19/20
to TiddlyWiki
I tried this version and it seems to work:
\define fold(heading, text)

<$button class="tc-btn-invisible" popup=<<qualify "$:/state/section$heading$">>>

$heading$
{{$:/core/images/chevron-right}}
<
/$button>

<$reveal type="nomatch" state=<<qualify "$:/
state/section$heading$">> text="">
$text$
</$reveal>
\end

Only problem is that the arrow button now stays the same but i think i can live with it. Also, is there any smaller and vertical arrow that can be used in place of the current one?
Thanks

Reet Pandher

unread,
May 19, 2020, 1:01:11 PM5/19/20
to TiddlyWiki
Final Version:
\define fold(heading, text)
<$button class="tc-btn-invisible" popup=<<qualify "$:/state/section$heading$">>>


$heading$
{{$:/core/images/fold-button}}

</$button>
<$reveal type="nomatch" state=<<qualify "$:/
state/section$heading$">> text="">
$text$
</$reveal>
\end

Changed the image from chevron-right to fold-button. It is a smaller icon so it doesn't bother as much without the animation!!
Reply all
Reply to author
Forward
Message has been deleted
Message has been deleted
Message has been deleted
0 new messages