DVWP xsl formatting help needed

Question

Need a hand formatting some XSL. Taking a look at an example that Marc Anderson put together for a jquery accordion, I need to tweak the output. I've been playing with this for quite a while and can't seem to get it to do what I tell it to (or what I want it to).

Here's the XSL...

 <xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema"
    xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"       xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
  <xsl:call-template name="AccordionSetup"/>
</xsl:template>

<xsl:template name="AccordionSetup">
  <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
  <div id="left-accordion" style="width: 300px;">
    <ul>       
      <xsl:for-each select="$Rows">
      <xsl:sort select="@AccHeading_x003a_Order" data-type="number"/>
      <xsl:sort select="@Order" data-type="number"/>
      <xsl:call-template name="AccordionPanels">
        <xsl:with-param name="Rows" select="$Rows"/>
      </xsl:call-template>
    </xsl:for-each>
    </ul>
  </div>
</xsl:template>

<xsl:template name="AccordionPanels">
  <xsl:param name="Rows"/>
  <xsl:variable name="NewHeading" select="ddwrt:NameChanged(string(@AccHeading.), 0)"/>
  <xsl:if test="string-length($NewHeading) &gt; 0">
    <li>
      <a href="#{substring-before(@AccHeading., ';#')}">
        <xsl:value-of select="substring-after(@AccHeading., ';#')"/>
      </a>
    </li>
    <div>
      <ul>
        <xsl:variable name="PanelRows" select="$Rows[@AccHeading. = current()/@AccHeading.]"/>
        <xsl:for-each select="$PanelRows">
          <xsl:call-template name="AccordionPanelContent"></xsl:call-template>
        </xsl:for-each>
      </ul>
    </div>
  </xsl:if>
</xsl:template>

<xsl:template name="AccordionPanelContent">
  <li>
    <xsl:value-of select="@Title"/> - <a href="{@ContentLink}"><xsl:value-of select="@ContentLink.desc"/></a>
  </li>
</xsl:template>

The output of the above results in the following formatting

<div id="accordion">
<ul>
<li><a href="#">First header</a></li>
<div>First content</div>
<li><a href="#">Second header</a></li>
<div>Second content</div>
</ul>
</div>

What I need is for the output to be as such.......

 <div id="accordion">
    <ul>
       <li><a href="#">First header</a></li>
       <li><a href="#">Second header</a></li>
   </ul>
    <div>First content</div>
    <div>Second content</div>

    </div>

Answer 1

Here is a quick and dirty, untested, solution that "should" work. If I had a bit more time, I could probably provide a more elegant solution.

I'll admit I didn't look, too closely at the code, so hopefully it will at least get you started in the right direction.

 <xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" 
    xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"       xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls"> 
  <xsl:call-template name="AccordionSetup"/> 
</xsl:template> 

<xsl:template name="AccordionSetup"> 
  <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/> 
  <div id="left-accordion" style="width: 300px;"> 
    <ul>        
      <xsl:for-each select="$Rows"> 
      <xsl:sort select="@AccHeading_x003a_Order" data-type="number"/> 
      <xsl:sort select="@Order" data-type="number"/> 
      <xsl:call-template name="AccordionHeaders"> 
        <xsl:with-param name="Rows" select="$Rows"/> 
      </xsl:call-template> 
    </xsl:for-each>
    </ul> 
      <xsl:for-each select="$Rows"> 
      <xsl:sort select="@AccHeading_x003a_Order" data-type="number"/> 
      <xsl:sort select="@Order" data-type="number"/> 
      <xsl:call-template name="AccordionContent"> 
        <xsl:with-param name="Rows" select="$Rows"/> 
      </xsl:call-template> 
    </xsl:for-each>    
  </div> 
</xsl:template> 

<xsl:template name="AccordionHeaders"> 
  <xsl:param name="Rows"/> 
  <xsl:variable name="NewHeading" select="ddwrt:NameChanged(string(@AccHeading.), 0)"/> 
  <xsl:if test="string-length($NewHeading) &gt; 0"> 
    <li> 
      <a href="#{substring-before(@AccHeading., ';#')}"> 
        <xsl:value-of select="substring-after(@AccHeading., ';#')"/> 
      </a> 
    </li> 
  </xsl:if> 
</xsl:template> 

<xsl:template name="AccordionContent"> 
  <xsl:param name="Rows"/> 
  <xsl:variable name="NewHeading" select="ddwrt:NameChanged(string(@AccHeading.), 0)"/> 
  <xsl:if test="string-length($NewHeading) &gt; 0"> 
    <div> 
      <ul> 
        <xsl:variable name="PanelRows" select="$Rows[@AccHeading. = current()/@AccHeading.]"/> 
        <xsl:for-each select="$PanelRows"> 
          <xsl:call-template name="AccordionPanelContent"></xsl:call-template> 
        </xsl:for-each> 
      </ul> 
    </div> 
  </xsl:if> 
</xsl:template> 



<xsl:template name="AccordionPanelContent"> 
  <li> 
    <xsl:value-of select="@Title"/> - <a href="{@ContentLink}"><xsl:value-of select="@ContentLink.desc"/></a> 
  </li> 
</xsl:template> 

Answer 2

Check the jqueryUI documentation. What the .accordion() function wants to see in the markup is something like this:

<div id="accordion">
  <h3><a href="#">First header</a></h3>
  <div>First content</div>
  <h3><a href="#">Second header</a></h3>
  <div>Second content</div>
</div>