TiddlyWiki5/editions/tw5.com/tiddlers/widgets/RevealWidget.tid

created: 20131024141900000
modified: 20140211232346858
tags: widget
title: RevealWidget
type: text/vnd.tiddlywiki

! Introduction

The reveal widget hides or shows its content depending upon the value of a [[state tiddler|StateTiddlers]]. The type of the widget determines the condition for the content being displayed:

* type=''match'': the content is displayed if the state tiddler matches a specified value
* type=''nomatch'': the content is displayed if the state tiddler doesn't match a specified value
* type=''popup'': the content is displayed as a popup as described in the PopupMechanism

! Content and Attributes

The content of the `<$reveal>` widget is displayed according to the rules given above.

|!Attribute |!Description |
|state |The title of the tiddler containing the state |
|type |The type of matching performed: ''match'', ''nomatch'' or ''popup'' |
|text |The text to match when the type is ''match'' and ''nomatch'' |
|position |The position used for the popup when the type is ''popup''. Can be ''left'', ''above'', ''aboveright'', ''right'', ''belowleft'' or ''below'' |
|default |Default value to use when the state tiddler |
|animate |Set to "yes" to animate opening and closure (defaults to "no") |
|retain |Set to "yes" to force the content to be retained even when hidden (defaults to "no")|

Retaining the content when hidden can give poor performance since the hidden content requires refresh processing even though it is not displayed. On the other hand, the content can be revealed much more quickly. Note that setting ''animate="yes"'' will also force ''retain="yes"''.

! Examples

!! Simple content reveal

Here's a simple example of showing and hiding content with buttons:

```
<$button set="$:/SampleRevealState" setTo="show">Show me</$button>
<$button set="$:/SampleRevealState" setTo="hide">Hide me</$button>

<$reveal type="match" state="$:/SampleRevealState" text="show">
! This is the revealed content
And this is some text
</$reveal>
```

It renders as:

<$button set="$:/SampleRevealState" setTo="show">Show me</$button>
<$button set="$:/SampleRevealState" setTo="hide">Hide me</$button>

<$reveal type="match" state="$:/SampleRevealState" text="show">
! This is the revealed content
And this is some text
</$reveal>

!! Popup

Here is a simple example of a popup built with the RevealWidget:

```
<$button popup="$:/SamplePopupState">Pop me up!</$button>

<$reveal type="popup" state="$:/SamplePopupState">
<div class="tw-drop-down">
! This is the popup
And this is some text
</div>
</$reveal>
```

It renders as:

<$button popup="$:/SamplePopupState">Pop me up!</$button>

<$reveal type="popup" state="$:/SamplePopupState">
<div class="tw-drop-down">
! This is the popup
And this is some text
</div>
</$reveal>