<xmod:ToggleImage>

<xmod:ToggleImage> renders a clickable image that toggles the visibility of the element matched by Target — same behavior as <xmod:ToggleButton>, just rendered as an image rather than a push-button.

Requires jQuery

The hosting page must include jQuery.

Sibling variants

• <xmod:ToggleButton> — push-button
• <xmod:ToggleLink> — hyperlink

Example

<xmod:Template Id="Employees">
  <ListDataSource CommandText="SELECT EmployeeId, FirstName, LastName, Evaluation FROM Employees" />
  <ItemTemplate>
    <strong>[[FirstName]] [[LastName]]</strong>
    <xmod:ToggleImage AlternateText="View Evaluation" ImageUrl="~/images/expand.gif"
        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
ImageUrl	URL		Path to the image file. Tilde (~) supported
AlternateText	string		Alt text for screen readers and search engines
Speed	Slow Normal Fast | integer (ms)	(instant)	Transition speed. Omit for an instant toggle
CssClass	string		CSS class name(s)
Style	string		Inline CSS
ToolTip	string		Hover tooltip
Visible	True False	True	Shows or hides the control

* Required property

Deprecated Properties (styling)

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

See <xmod:ToggleButton> for full property details and the inline-element caveat with Speed.