This is sort of a Part II of SharePoint Content Query Webpart - Auto CommonViewFields

gistfile1.xslt

//In SP Header template xslt have you ever noticed the attribute mode
<xsl:template name="someTemplateName" match="*[@GroupStyle='someTemplateName']" mode="header">

//well there is another option mode="footer" now by default it isnt hooked up so you need to copy CallHeaderTemplate or modify CallFooterTemplate to the following:

    <xsl:template name="OuterTemplate.CallFooterTemplate">
      <xsl:value-of disable-output-escaping="yes" select="$EndList" />
      <xsl:apply-templates select="." mode="footer">
        </xsl:apply-templates>
      <xsl:value-of disable-output-escaping="yes" select="$EndListItem" />
    </xsl:template>

//this will now enable us to add tempaltes to the SP Header xslt that will wrap the content query content with divs and css and call javascript on it. One thing to note is xslt does not allow you to leave open html tags so you must use CDATA to escape it.

//Here is an examples:
//1) Show and hide content

 <xsl:template name="ShowHide" match="*[@GroupStyle='ShowHide']" mode="header">
  <xsl:text disable-output-escaping="yes"><![CDATA[<div class="products">]]></xsl:text>
 </xsl:template>
 <xsl:template match="*[@GroupStyle='ShowHide']" mode="footer">
  <a href="javascript:hide()">Hide</a> | <a href="javascript:show()">Show</a>
  <xsl:text disable-output-escaping="yes">
  <![CDATA[<script type="text/javascript">
    $(document).ready(function(){
   var display = $(".products .productContainer:first").find(".productDisplay");
   display.removeClass("style5");
   display.addClass("style1");
   display.addClass("long");
   hide();
    });
    function hide()
    {
    $(".products .productContainer .productDisplay").hide();
    $(".products .productContainer:first").find(".productDisplay").show();
    }
    function show()
    {
    $(".products .productContainer .productDisplay").show();
    $(".products .productContainer:first").find(".productDisplay").show();
    }
   </script></div>]]></xsl:text>
 </xsl:template>

//2) Or mabey a third party javascript library such as easyslider

<xsl:template name="Slider" match="*[@GroupStyle='Slider']" mode="header">
  <xsl:text disable-output-escaping="yes"><![CDATA[<div id="ItemSlider" class="slider"><ul>]]></xsl:text>
 </xsl:template>
 <xsl:template match="*[@GroupStyle='Slider']" mode="footer">
  <xsl:text disable-output-escaping="yes"><![CDATA[</ul></div>
  <script type="text/javascript">
    $(document).ready(function(){ 
                $("#ItemSlider").easySlider({
                    auto: true, 
                    continuous: true
                });
            }); 
   </script>]]></xsl:text>
 </xsl:template>

//To use these wrapping templates you MUST set a grouping style, you can either specify a rule that is non specific to your items and will group all your items together or you can define a grouping rule that spilts your items buy remeber if you do this you will have your template rendered multiple times.

//This really opens up the use of the content query webpart.​