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

caption: reveal
created: 20131024141900000
jeremy: tiddlywiki
modified: 20240721175716320
tags: Widgets
title: RevealWidget
type: text/vnd.tiddlywiki

! Introduction

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

* type=''match'': the content is displayed if the state tiddler matches the text attribute value
* type=''nomatch'': the content is displayed if the state tiddler doesn't match the text attribute value
* type=''popup'': the content is displayed as a popup as described in the PopupMechanism
* type=''lt'': the content is displayed if the state tiddler contains an integer with a value ''less than'' the text attribute value
* type=''gt'': the content is displayed if the state tiddler contains an integer with a value ''greater than'' the text attribute value
* type=''lteq'': the content is displayed if the state tiddler contains an integer with a value ''less than or equal to'' the text attribute value
* type=''gteq'': the content is displayed if the state tiddler contains an integer with a value ''greater than or equal to'' the text attribute value


! Content and Attributes

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

|!Attribute |!Description |
|state |A TextReference containing the state |
|stateTitle |A title containing the state, ''without'' TextReference. Gets preferred over the <<.attr state>> attribute |
|stateField |A ''field name'' which is used to look for the state, if the attribute <<.attr stateTitle>> is present |
|stateIndex |An ''index'' which is used to look for the state, if the attribute <<.attr stateTitle>> is present |
|tag |Overrides the default HTML element tag (`<div>` in block mode or `<span>` in inline mode) |
|type |The type of matching performed: ''match'', ''nomatch'', ''popup'', ''lt'', ''gt'', ''lteq'' or ''gteq'' |
|text |The text to match when the type is ''match'', ''nomatch'', ''lt'', ''gt'', ''lteq'' or ''gteq'' |
|class |An optional CSS class name to be assigned to the HTML element<br/>&raquo; Set to `tc-popup-keep` to make a popup "sticky", so it won't close when you click inside of it|
|style |An optional CSS style attribute to be assigned to the HTML element |
|position |The position used for the popup when the type is ''popup''. Can be ''left'', ''above'', ''aboveleft'', ''aboveright'', ''right'', ''belowleft'', ''belowright'' or ''below'' |
|positionAllowNegative |Set to "yes" to prevent computed popup positions from being clamped to be above zero |
|default |Default value to use when the state tiddler is missing |
|animate |Set to "yes" to animate opening and closure (defaults to "no"; requires "retain" to be set to "yes") |
|retain |Set to "yes" to force the content to be retained even when hidden (defaults to "no") |
|updatePopupPosition|<<.from-version "5.1.23">>Set to "yes" to update the popup position when the state tiddler is updated (defaults to "no")|

<<.tip """<$macrocall $name=".from-version" version="5.1.18"/> <$macrocall $name=".attr" _="stateTitle"/>, <$macrocall $name=".attr" _="stateField"/> and <$macrocall $name=".attr" _="stateIndex"/> attributes allow specifying Tiddler states ''directly'', without interpreting them as [[TextReferences|TextReference]].
This is useful for edge-cases where titles may contain characters that are used to denote Tiddler fields or indices (`!!`, `##`)""">>

<<.tip """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 require ''retain="yes"''""">>

! Examples

<<testcase TestCases/RevealWidget/SimpleReveal>>

<<testcase TestCases/RevealWidget/AccordionSlider>>

<<testcase TestCases/RevealWidget/Popup>>

<<testcase TestCases/RevealWidget/TextReference>>