Here’s template I keep handy for what I call my switch/case toggle box– I use it especially for tips and notes but it could be used for just about anything.
<!-- ********** SWITCH/CASE TOGGLE***************************** -->
<!-- Lorem ipsum -->
<xf:switch>
<xf:case id="shut">
<xf:trigger appearance="minimal">
<h:span style="color:olive; font-size:95%;">
<xf:label>:: toggle ::</xf:label>
</h:span>
<xf:toggle case="open" ev:event="DOMActivate"/>
</xf:trigger>
</xf:case>
<xf:case id="open">
<xf:trigger appearance="minimal">
<h:span style="color:gray; font-size:95%;">
<xf:label>:: toggle ::</xf:label>
</h:span>
<xf:toggle case="shut" ev:event="DOMActivate"/>
</xf:trigger>
<h:div style="color:olive; font-size:95%;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</h:div>
</xf:case>
</xf:switch>
<!-- ******* END SWITCH/CASE TOGGLE***************************** -->
For another approach with the same effect see A better Legendary Toggle
[...] are some images that show how the Switch/Case Toggle works (see Switch/Case Toggle Template ) . In this particular example, notice how the box drops down above the division below it [...]
Pingback by Clarkepeters’s Weblog — September 13, 2007 @ 12:01 pm
[...] These same procedure could work with any type of grouped data without having a legend at all (see Switch/Case Toggle Template or Using Switch Case as a drop down box). In my post Xforms: The Legendary Toggle I use two [...]
Pingback by A better Legendary Toggle « Clarkepeters’s Weblog — October 9, 2007 @ 9:25 pm
[...] This same procedure could work with any type of grouped data without having a legend at all (see Switch/Case Toggle Template or Using Switch Case as a drop down box). In my post Xforms: The Legendary Toggle I use two cases [...]
Pingback by ClarkePeter’s Weblog » A better Legendary Toggle — October 20, 2008 @ 7:17 pm
[...] need to look over that post to get an idea of what’s going on here (you may want to look at Switch/Case Toggle Template or Using Switch Case as a drop down box). [...]
Pingback by ClarkePeter’s Weblog » Hiding dropovers with CSS and Xforms — October 21, 2008 @ 10:53 am
[...] are some images that show how the Switch/Case Toggle works (see Switch/Case Toggle Template ) . In this particular example, notice how the box drops down above the division below it rather [...]
Pingback by ClarkePeter’s Weblog » Drop Down over/above lower text (Xforms Switch and CSS) — October 21, 2008 @ 10:58 am