<xmod:toggle>

TEMPLATE CONTROL: This tag is used to "toggle" the display of information on and off. In other words, any HTML and XMod tags you put between the toggle tag will collapse/expand with each click of the mouse. This allows you to only show information if the user wants to see it. Behind the scenes, this tag uses Javascript so that when the user clicks, no round-trip is made to the web server. The action occurs on the client machine - greatly speeding up the process and providing your user with a better experience.

 

NOTE: <xmod:toggle> tags cannot be nested.

ATTRIBUTES:

caption

This is the text that will appear in the link the user clicks to show/hide the information wrapped by the <xmod:toggle>  </xmod:toggle> tag.
NOTE: You can also use the <xmod:field> tag in the caption. This makes it possible to create FAQ-like displays where you click the question and the answer appears. See the Examples for, well, an example

This attribute has been superseded by opentextand closetext. It is still available for backward-compatibility. However, you should use the new attributes instead.

visible

Determines the initial state of the content between the toggle tag. If "true" then the information will be visible initially and the first click of the link will hide it. If "false" then the information will be hidden initially and the first click of the link will show it.

display

Determines how the toggle button/link will be displayed. Valid values are:

 

  • button - the tag will render as a standard HTML button

  • linkbutton - the tag will render as a hyperlink

  • imagebutton - the tag will render as the image, specified in openimageurl or closeimageurl depending on the current toggle state.

 

The default value is linkbutton

New to Version 3.5

layout

Determines how the toggle's content will render when it is open. Valid values are:

 

  • block - the tag's contents will render on a line by itself (like <p> tags do in HTML)

  • inline - the tag's contents will render inline, allowing other elements to be on the same line

 

The default value is block.

New to Version 3.5

opentext

This is the text that will be displayed in the hyperlink (for linkbuttons), on the button face (for buttons) or as the alt. text (for image buttons) when the toggle's content is hidden - i.e. when clicking the button will "open" the panel.

New to Version 3.5

closetext

This is the text that will be displayed in the hyperlink (for linkbuttons), on the button face (for buttons) or as the alt. text (for image buttons when the toggle's content is being displayed - i.e. when clicking the button will "close" the panel.

New to Version 3.5

openimageurl

Only valid if display is "imagebutton". This is a url to an image file to display when the toggle's content is hidden - i.e. when clicking the image will "open" the panel containing the content.

New to Version 3.5

closeimageurl

Only valid if display is "imagebutton". This is a url to an image file to display when the toggle's content is visible - i.e. when clicking the image will "close" the panel containing the content.

New to Version 3.5

imagealign

A value determining how the image will be aligned relative to nearby elements in the page. It is ignored unless display is imagebutton. Valid values are:
 

  • absbottom - the lower edge of the image is aligned with the lower edge of the largest element on the same line

  • absmiddle - the middle of the image is aligned with the middle of the largest element on the same line

  • baseline - the lower edge of the image is aligned with the lower edge of the first line of text

  • bottom - the lower edge of the image is aligned with the lower edge of the first line of text

  • left - the image is aligned on the left edge with the text wrapping on the right

  • middle - the middle of the image is aligned with the lower edge of the first line of text

  • right - the image is aligned on the right edge with text wrapping on the left

  • texttop - the upper edge of the image is aligned with the upper edge of the highest text on the same line

  • top - the upper edge of the image is aligned with the upper edge of the highest element on the same line
     

If this attribute is not set, the default alignment, as determined by the surrounding elements and page will be applied

New to Version 3.5

panelstyle

CSS style values that will be applied to the panel containing the toggle's content.

New to Version 3.5

togglestyle

CSS style values that will be applied to the button/hyperlink/image (depending on the value of display.

New to Version 3.5

 

 

EXAMPLES

This combines the toggle tag with the <xmod:if> tag. The result is that the user is presented with a "Read the Details" link only if a record has notes available. If notes are available and the user clicks the link, then the contents of the Notes field are displayed, along with an <h3> heading.

 

<xmod:if name="Notes">

  <xmod:toggle visible="false" caption="Read the Details">

    <h3>All the Sordid Details:</h3>

    <xmod:field name="Notes" class="Normal" />

  </xmod:toggle>

</xmod:if>

 

The following example creates a FAQ type display in which the question is displayed as a link and when the user clicks that link, the answer is displayed. Note the use of single quotes as they are necessary for XMod to properly interpret the tags.

 

<xmod:toggle caption='<xmod:field name="Question"/>'>

  <xmod:field name="Answer"/>

</xmod:toggle>