It is common for Help systems to use layering techniques to limit the amount of information presented to the reader. The reader chooses to view the information by clicking on a link. Most layering techniques, including expanding text, drop-down text and popup text, are implemented using Dynamic HTML.
In the following example illustrating this technique, a note element is encoded to output as drop-down text, where the note label is used to toggle the display of the note text. The note element is simply marked up with a distinct outputclass attribute value (in this case, hw_expansion).
<note outputclass="hw_expansion" type="note">Text of the note</note>
Without any modification, the DITA OT will transform the note element to a paragraph element with a CSS class of the outputclass value.
In the example illustrating this technique, note how the following lines change the way that the XSL-T file processes the note element:
<xsl:template match="*[contains(@class, 'topic/note ')]"> <xsl:if test="@outputclass='hw_expansion'" > <p> <a class="pseudolink_up" onclick="hwToggle(this);">Note: </a> </p> </xsl:if> <div > <xsl:if test="@outputclass='hw_expansion'" > <xsl:attribute name="class"> <xsl:value-of select="@outputclass" /> </xsl:attribute> </xsl:if> </div> </xsl:template>
For the layering DHTML effect to work, a JavaScript routine must be written to control the toggling of the display of the dropdown text. Likewise, CSS classes used in the layering (in this example, pseudolink_up and hw_expansion) must be defined in the CSS file for the output.
A simple JavaScript toggling routine is as follows:
function hwToggle(me) {
var nextS=getNextSibling(me.parentNode);
if(nextS.style.display!='block') {
nextS.style.display='block';
me.className='pseudolink_down'
}
else {
nextS.style.display='none';
me.className='pseudolink_up'
}
}
function getNextSibling(startBrother){
endBrother=startBrother.nextSibling;
try {
endBrother.nextSibling;
}
catch(er) {
return null;
}
while(endBrother.nodeType!=1){
if(!endBrother.nextSibling){
return null;
}
endBrother = endBrother.nextSibling;
}
return endBrother;
}
A simple set of CSS settings are:
a.pseudolink_up
{
color: blue;
cursor: hand;
border-bottom: blue 1px dashed;
background-position: left center;
background-image: url(images/purple_right_sm.jpg);
background-repeat: no-repeat;
padding-left: 15px;
}
a.pseudolink_down
{
color: green;
cursor: hand;
border-bottom: blue 1px dashed;
background-position: left center;
background-image: url(images/purple_down_sm.jpg);
background-repeat: no-repeat;
padding-left: 15px;
}
div.hw_expansion
{
display:none;
}
When the build file is created, references should be made to include the CSS file (containing the CSS rules) and the JavaScript file (containing the toggle routine).
The layering technique described here is used in a production environment on a Web site which dynamically renders DITA content as XHTML. See http://www.hyperwrite.com/Articles/showarticle.aspx?id=71.