How can you display a list at the click of a button?

[Mike Andyl]

For the button I want to make an Action. I took the example from the help as a basis, but of course it does not work :)

\define my-actions()
    <$list filter="[tag[About]]">
    <$link/>
    {{||$:/core/templates/static-tiddler}}
    </$list>
\end

<$button actions=<<my-actions>>>
Click me!
</$button>

[Soren Bjornstad]

Mike,

An action cannot directly contain wikitext that should appear -- it can generally only contain action widgets (there are a few exceptions, like you can use a list widget to create a bunch of actions matching some pattern). The general pattern for creating a button that hides/shows content is to create a field that contains information about whether or not to show the content, then use a $reveal or $list widget to control whether it appears. For instance, to use a field called "show-content" on the current tiddler to control the display:

\define show-actions() <$action-setfield show-content="yes"/>

\define hide-actions() <$action-setfield show-content="no"/>

<$reveal state="show-content" type="match" text="yes">

  <$list filter="[tag[About]]">
    <$link/>
    {{||$:/core/templates/static-tiddler}}
  </$list>

  <$button actions=<<hide-content>>>Hide me again</$button>

</$reveal>

<$reveal state="!!show-content" type="nomatch" text="yes">

  <$button actions=<<show-content>>>

    Click me!

  </$button>

</$reveal>

(Note that unlike in your example, I've included an action and button to hide the content again. You can of course take that out if you don't want it...but the only way to get the content to go away again will be to go in and manually change the field on the current tiddler.)

You might also like to use a temporary tiddler, rather than a field on the current tiddler, to store whether the content should be open. If so, you would do something like:

\define show-actions() <$action-setfield $tiddler=<<qualify "$:/temp/MyContentIsOpen">> show-content="yes"/>

<$reveal state=<<qualify "$:/temp/MyContentIsOpen">> type="match" text="yes">

<<qualify>> may not be necessary depending on your use case -- it prevents name collisions if you use this as a template on multiple tiddlers (otherwise, clicking the "show" button on one tiddler that uses the template will result in the content showing on all of them).

More information: Hiding and Showing Things (Grok TiddlyWiki), action widgets (TW docs), $reveal widget (TW docs), qualify macro (Grok TiddlyWiki).

[Charlie Veniot]

G'day Mike,

I kind of like what you're trying to do.  Because I'm a big fan of modals and I was in a coding mood ...

If you are into the just-for-the-giggles fun of it, give the attached a spin by dragging it into tiddlywiki.com

Instead of a modal, all of this could make for a neat sidebar tiddler (with a search field), for searching and previewing tiddlers.

That was fun.  Haven't even had my first coffee of the day yet ...

[Charlie Veniot]

Oops, in the "Modal Viewer" tiddler, I forgot to add a closing bracket to one of the HTML elements.  The tiddler should look like this:

!!! Tagged with __''<$text text=<<thisTag>>/>''__

<$list filter="[tag<thisTag>]">

<details><summary><$link/></summary>

    {{||$:/core/templates/static-tiddler}}

</details>

</$list>

[Mat]

miket... - Somewhat like what Soren says, but not quite:

It doesn't look like you actually want to perform an "action" as it is meant in TW but rather just show and hide(?) a regular listing. For this, refer to the revealwidget, the "accordion" example, like so:

<$reveal type="nomatch" state="$:/state/SampleReveal2" text="show">

<$button set="$:/state/SampleReveal2" setTo="show">Show me</$button>

</$reveal>

<$reveal type="match" state="$:/state/SampleReveal2" text="show">

<$button set="$:/state/SampleReveal2" setTo="hide">Hide me</$button>

 <$list filter="[tag[About]]">

    <$link/>
    {{||$:/core/templates/static-tiddler}}
 </$list>

</$reveal>

BTW, this construct is IMO unnecessarily complex and I've called attention to this here with a proposal for a simpler "accordionwidget". Do comment there if you agree or disagree.

<:-)