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, dropdown text and popup text, are implemented using Dynamic HTML.
In the following example illustrating the technique, a note element is to output as dropdown text, where the note label is used to toggle the display of the note text. The note element is simply marked up with an outputclass distinct 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 the technique, the following changes to the way the XSL-T file processes the note element are made:
<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){ //alert('Sorry! No more siblings!'); 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. (Refer to Web page using DHTML layering technique.)