Hi Suzyb

How will the tabs on the website be generated? Are'nt they going to mirror the content structure from the backoffice so content from tab a in the backoffice goes into tab a in the website and so on?

Or is the tabs on the frontpage made dynamically somehow that does not take the backoffice structure into account?

/Jan

That's what I'm not sure of.  The pages are about university courses which can last 2 or 3 years.  Each page has an overview about the course and a brief summary of what is covered in each of the years.  To keep things nice the designer only wants 1 year's summary shown at a time so I am using jquery "tabs" to do this, basically hiding or showing a div when a link is clicked.

This is the code shows I am ultimatly trying to produce in the front end, title and content is what I want to be editable.  If the course has 2 years then 2 tabs are shown, if it has 3 then 3 tabs are shown but I'd like this to be dynamic if possible.  So if the client wants to add a course with 10 years, they can.

<ul class="tabs">
    <li><a href="#tab1"><!--title--></a></li>
    <li><a href="#tab2"><!--title--></a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
    </div>
</div>

For the time being I have added 6 fields to my doc type,  tab 1 title, tab 1 content, tab 2 title, tab 2 content etc and have an xslt macro that adds an li or tab_content div if the field isn't empty.  But that is no use if the client wants to add a course with 4 years or 5 years.

Yes it does.

Thanks a lot Jan.

I'm glad to hear that - please don't hesitate to ask further questions if you're in doubt about anything :-)

/Jan

Hi,

There's an explanation of how to use an accordion layout at http://blog.pbdesk.com/2011/02/re-usable-jquery-accordion-for-umbraco.html

Below is a modifed version of the XSLT file which can be used for tabs in the same way as the accordion. You can just add more tabs with the Repeater then as mentioned in the article above.

<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="propertyAlias" select="string('Tabs')" />
<xsl:template match="/">
<xsl:if test="$currentPage/tabs/items/item">
<div id="tabs">
<ul>
<xsl:for-each select="$currentPage/tabs/items/item">
<li><a href="#{position()}"><xsl:value-of select="./data [@alias = 'TabHeader']" disable-output-escaping="yes" /></a></li>        
</xsl:for-each>
</ul>
<xsl:for-each select="$currentPage/tabs/items/item">
<div id="{position()}">
<xsl:value-of select="./data [@alias = 'TabContent']" disable-output-escaping="yes" />
</div>
</xsl:for-each>

</div> <!-- end of tabs div-->
<script type="text/javascript">
<![CDATA[
$(function() {
$("#tabs").tabs(); 
});
]]> 
</script>
</xsl:if>
</xsl:template>

Just another way of doing it :)

Phonsie.

is working on a reply...