Any idea how to collapse/expand section within a tiddler

[James]

Hi all,
Is there any ways we can collapse/expand the content in the section by clicking on the heading?

[Eric Shulman]

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"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[Tobias Beer]

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:

http://fold.tiddlyspot.com

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]

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]

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]

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]

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]

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]

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]

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]

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]

Cool! *pockets code*  Do you have any more nifty code?

[Rick Yagodich]

Only that same edit-from-parent applied to a buttonTemplate for the <<tabs>> macro… which is no different.

[InflamedSebi]

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]

InflamedSebi,

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

[TonyM]

Don't worry more ideas will come along soon :)

[CJ Veniot]

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]

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]

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]

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]

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]

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]

Wink Wink

[Reet Pandher]

Hi Eric,

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

[Mat]

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]

I didn't even create a second button though :(

All the formatting disappears the moment i enclose my text into the folds.

[Reet Pandher]

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]

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