WebVoyage 7 (Tomcat) Toggle Record Display Fields

I had a librarian tell me that while giving a presentation on Tomcat WebVoyage to students, one of the record displays had an extremely long Contents: field through which she had to scroll, all the while embarrassed by students’ laughter. I know, I know, I didn’t quite get the joke either.

Anyway, to combat the fear and shame felt by our librarians, I wrote a bit of code that will toggle the contents of a field in a record display. If you’d like to see this amazing technology in action, try clicking the word Contents: at this record on TCC’s site.

Step 1
Add the following to a cascading style sheet that is loaded with holdingsInfo. (ui/skin/css/displayCommon.css, for example)

.fieldLabelSpan {
   cursor:pointer;
}

I actually have a stylesheet that loads last and has all the stylesheet changes I make as suggested by the brilliant Michael Doran on his website.

Step 2
Add the following to a JavaScript file that is loaded with holdingsInfo, like ui/skin/jscripts/highLight.js. Again, I have a separate JavaScript file for all the scripts I write (spellchecker, timeout warning, etc.) that is loaded with each page:

function tcc_toggle(elementName) {
   if(document.getElementById && document.getElementById(elementName)) {
      if(document.getElementById(elementName).style.display == 'none') {
         document.getElementById(elementName).style.display = 'block';
      } else {
         document.getElementById(elementName).style.display = 'none';
      }
   }
}

Step 3
The last, crucial step is to call this script somehow.

1. Backup /m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/skin/xsl/contentLayout/display/display.xsl in case something goes horribly wrong.
2. Open /m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/skin/xsl/contentLayout/display/display.xsl and find <xsl:when test=”string-length($displayData)”> (There should only be one)
3. Add the following (additions are boldface)
    

   <xsl:when test="string-length($displayData)">
     <div class="fieldLabel">
      <span class="fieldLabelSpan">
        <xsl:choose>
         <xsl:when test="string-length(@label)">
           <a>
            <xsl:attribute name="onclick">tcc_toggle('<xsl:value-of select="@label"/>');</xsl:attribute>
            <xsl:attribute name='title'>Hide or Show <xsl:value-of select="@label"/></xsl:attribute>
            <xsl:value-of select="@label"/>
           </a>
         </xsl:when>
         <xsl:otherwise>
   
         </xsl:otherwise>
        </xsl:choose>
      </span>
     </div>
     <div class="fieldData" >
      <xsl:attribute name="id">
        <xsl:value-of select="@label"/>
      </xsl:attribute>
      <xsl:copy-of select="$displayData"/>
     </div>
   </xsl:when>

That’s all there is to it! Enjoy!