From ProtoScript

Contents 1 YUI:ToggleShowHide Behavior 1.1 Example 1.2 Attributes 1.3 Callbacks 1.4 Demo

YUI:ToggleShowHide Behavior

Toggles an element or elements for toggling their visibility between shown and hidden (actually toggles the visibility attributes between 'visible' and 'hidden'). This means the element will hide or show in place (without giving up their physical space on the page).

Example

$proto('.header', {
  SetStyle: {cursor: 'pointer'},
  Click: {
    onClick: {
      ToggleClass: {
        styleClass: 'closed-title',
        otherStyleClass: 'opened-title'
      },
      ToggleShowHide: {
        target: '.content'
      },
    }  
  }
});

The code above sets up a pointer cursor for all elements with class name 'header' and sets up a Click behavior. When the header is clicked it will toggle the corresponding element with class name = 'content'. In addition it will toggle the style class for the header to flip between show/hide state.

Attributes

Name	Description	Default	Valid Values	Example
target	Selected element or elements to attach toggle visibility. If no value supplied, uses the last targeted element. If value is supplied, use the element(s) selected by the target instead. See Element Scope	Inherits parent target	String value denoting an interface element.	target: '#avatar'

Callbacks

Name	Description
onToggleShowHide	The callback corresponding to the ToggleShowHide behavior. Fired when the behavior completes.

Demo

See ToggleShowHide