<xmod:ToggleButton>

<xmod:ToggleButton> renders a push-button that, when clicked, toggles the visibility of the element identified by Target (a jQuery selector). Optionally fade in/out using Speed.

Requires jQuery

The hosting page must include jQuery.

Sibling variants

• <xmod:ToggleImage> — same behavior, rendered as a clickable image
• <xmod:ToggleLink> — same behavior, rendered as a hyperlink

Example

<xmod:Template Id="Employees">
  <ListDataSource CommandText="SELECT EmployeeId, FirstName, LastName, Evaluation FROM Employees" />
  <ItemTemplate>
    <strong>[[FirstName]] [[LastName]]</strong>
    <xmod:ToggleButton Text="View Evaluation"
        Target='[[Join("#divEvaluation_{0}",[[EmployeeId]])]]'
        Speed="Fast" />
    <div id="divEvaluation_[[EmployeeId]]" style="display:none;">
      <p>[[Evaluation]]</p>
    </div>
  </ItemTemplate>
</xmod:Template>

Properties

Property	Values	Default	Description
Target *	jQuery selector		The element to show/hide
Speed	Slow Normal Fast | integer (ms)	(instant)	Transition speed. Omit for an instant toggle
Text	string		Caption displayed on the button
AccessKey	string		Keyboard shortcut character
CssClass	string		CSS class name(s)
Style	string		Inline CSS
Width	size		Width of the button
Height	size		Height of the button
ToolTip	string		Hover tooltip
Visible	True False	True	Shows or hides the button

* Required property

Deprecated Properties (styling)

BackColor, BorderColor, BorderStyle, BorderWidth, Font-*, ForeColor — use CssClass or Style instead.

Property Details

• Target: A jQuery selector — typically #id for an element by ID, or a class selector like .bio. The selected element's visibility is toggled with jQuery's .toggle() on click.

• Speed: When set, jQuery uses a fade in/out animation at the named speed.

  Value	Duration
  Slow	~600ms
  Normal	~400ms
  Fast	~200ms
  integer	exact milliseconds (e.g. 1000 = 1 second)

  Inline elements with Speed

  When Speed is set, jQuery animates by changing display. If the target is an inline element, jQuery 1.2.6+ will set display: block to make it visible — which can break inline layouts. Either explicitly set display: inline in CSS first, or use a block element as the target.