As a part of my umbraco based website www.PBDesk.com, I was developing learning interactions components which can be re-used in the eLearning section of the website. Accordion & Tabs are good examples of UI components which can be used as learning interactions. I was already implementing jQuery & jQuery UI in my site, so thought why not get these functionalities form jQuery?

Did some research and found one very interesting and helpful package for Umbraco, which can help me build my Accordion and Tab controls very easily. This package is Repeatable Custom Content by Masood Afzal. This package provides a datatype which allows adding repeatable custom contents/child nodes. That's what we need to Accordion & Tabs. Thanks to Masood Afzal!!

Live Demo at here.

Now lets start on how to create  Accordion for Umbraco site using jQuery UI and Repeatable Custom Content package. My work was based on Umbraco 4.5.2 and 4.6.1, jQuery 1.5, jQuery UI 1.8.9, Repeatable Custom Content package V2 (dated 10/7/2009)

First of all, you need to add proper reference to jQuery, jQuery UI & jQuery UI Theme files(.js and .css). Then I installed Repeatable Custom Content package V2. Once all this is in place we need to create new Datatype under umbraco Developer section.

Datatype : eLO Accordion

In my case I have given "eLO Accordion" as the name to the data type as it was one of my eLearning Object. Its just a name, you can give whatever is suitable to you.

1. Go to Umbraco backend, Developer section, Data Types. Right click on "Data Types" and select "create". 
2. In the create dialog box, give appropriate name and click "create" button.
3. In the "Render control" dropdown list select "Repeatable Custom Content V2".
4. Now in the settings section we need to add two properties  eLOAccordionHeader & eLOAccordionContent. (Again decide names at your ease). These properties will represent the text for the header and the body of the individual accordion.
   eLOAccordionHeader: Type - Simple Editor
   eLOAccordionContent: Type - Repeatable Custom Content
                                 Richtext  Editor
   Set Max repeatable items to 0
          
5. Save the data type.

Document Type Property 

Now to use this data type, we need to create appropriate property in the "document types" under "settings" section of Umbraco backend.
   

Make sure about the "Type". It should be set to the new data type that we just created above. And also this should be available in the dropdown list.
In my case, property alias for this property is "eLOAccordion".

XSLT to Render Accordion

Now is the time to create XSLT file and a macro associated with it to render the Accordion. Below is the sample code snippet based on the naming convensions used by my code. [Please visit http://umbraco.masoodafzal.com for more on xslt for Repeatable Custom Content]

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:variable name="propertyAlias" select="string('eLOAccordion')" /> 


<xsl:template match="/">

<xsl:if test="$currentPage/eLOAccordion/items/item">

  <div id="eLOPageAccordianDiv">

    <xsl:for-each select="$currentPage/eLOAccordion/items/item">

      <h3>

        <a href="#"><xsl:value-of select="./data [@alias = 'eLOAccordionHeader']" disable-output-escaping="yes" /></a>

      </h3>

      <div>

        <xsl:value-of select="./data [@alias = 'eLOAccordionContent']" disable-output-escaping="yes" /> 

      </div>

    </xsl:for-each>

  </div> <!-- end of eLOPageAccordianDiv div-->

  <script type="text/javascript">

	  <![CDATA[

	  $(function() {

		$( "#eLOPageAccordianDiv" ).accordion({active: false, autoHeight: false	});

	  });

	  ]]>  

  </script>

</xsl:if>


</xsl:template>
You can download the complete XSLT file from here. AccordionViewer.xslt
Once your xslt is ready, if not automatically created, you need to create a Macro and associate it with this xslt file.
Now insert this macro into the template or the content wherever you need an accordion. 
On the content page wherever you have a property of Accordion type, you will get interface like below to enter the contents:

  
 
You can see the live demo for the Accordion created by this way at http://www.pbdesk.com/elearning/csharp/test-chapter/accordiontest.aspx