Hide/Show Template

smys123 · June 26th, 2009, 03:21 PM

currently I have it set up like this:

Code:

<xsl:template match="enrollment_list"> 
<script language="JavaScript" src="js/motionpack.js"></script>   
    <script type="text/javascript">
    function viewIt(){
        
        document.getElementById('coursesList').style.display = 'block';
        document.getElementById('coursesList').style.visibility = 'visible';
        document.getElementById('coursesList').style.height = '100%';        
    }
    </script>
    <tr>
     <td>
      <table cellspacing="0" cellpadding="2" border="0">
         <tr>
         <td><font class="uportal-channel-strong">
         <xsl:value-of select="title"/>
         </font>
          &nbsp;-&nbsp;<a href="#" onclick="viewIt()">View</a> 
         <br/></td>
         </tr>
         <xsl:apply-templates select="empty"/>         
         <xsl:apply-templates select="enrollment"/>
      </table>
     </td>
    </tr>
</xsl:template>

<xsl:template match="enrollment">
    <script type="text/javascript">
        document.getElementById('coursesList').style.display = 'none';
        document.getElementById('coursesList').style.visibility = 'hidden';
        document.getElementById('coursesList').style.height = '0px';
    </script>
    <tr>
     <td id="coursesList">
      <font class="uportal-channel-text">
      &bullet; <a href="{lctxt/href1/@newLink}" target="_blank"><xsl:value-of select="lctxt/text1"/></a>
      </font>
     <img src="{$imagepath}/transparent.gif" border="0" height="10" width="5"/> 
     <img src="{$imagepath}/transparent.gif" border="0" height="10" width="5"/> 
     <xsl:for-each select="icon">
     <a href="{href/@newLink}" target="_blank">
       <img src="{$webCtServer}{src}" border="0"/>
     </a>
     <img src="{$imagepath}/transparent.gif" border="0" height="10" width="5"/> 
     </xsl:for-each>
     </td>
    </tr>
</xsl:template>

in the enrollment template it basically builds a link for each course the person is in. however the way i currently have it, it only hides the first course in the list, the rest are visible.

Any Thoughts? Basically I would like to toggle hide/show the whole list.

Thanks in advance
Aaron

samjudson · June 27th, 2009, 11:59 AM

This is not really an XSLT question, but a javascript one. You are setting every table cell to have an ID of 'courseList' - then calling getElementById which probably only returns the first one.

Either set the ID on the table so it hides the whole table, or write some JavaScript that loops through all table cells and sets them all to hidden. Where there are more than one item with the same property it is better to use class rather than ID, as ID should ideally be unique throughout a document. For this kind of task something like jquery would probably be of assistance.

smys123 · June 30th, 2009, 12:10 PM

The problem was the way I had the XSL laid out. I removed the apply templates portion, and actually nested the template inside the other. Once I did that I could put a div tag around the whole section and hide all the rows.

Thanks