adding a toggle (truncate) to spry dataset

[hotrattz]

Hi all,

I've searched hi and low on the interwebs and haven't found my answer hopefully one of you lovely people can help me. I'm trying to add a "see more/less" tag onto a spry dataset row on a site that i'm working on. The row is a [complete description] tag that is sourced from my .xml file. I've found various ways to do this to existing content ( content in a <p> tag etc.) but none of my efforts seem to work with the .xml file.

here is the code.

<div spry:region="catalog" class="SpotlightAndStacked">
<div spry:repeat="catalog" class="SpotlightAndStackedRow">
<div class="SpotlightContainer">
<div class="SpotlightColumn"><a href="_images/catalog/Art/{Picture_File}" title="{Headline}"><img src="_images/catalog/thumbs/Art/th_{Picture_File}"></a></div>
</div>
<div class="StackedContainer">
<div class="StackedColumn"> {Item_Last_Name}, {Item_First_Name}</div>
<div class="StackedColumn"> {Item_Code_Number}</div>
<div class="StackedColumn"> {Headline}</div>
<div class="StackedColumn"> {Complete_Description}</div>
<div class="StackedColumn"> {Item_Code_Number}</div>
<div class="StackedColumn"> <strong>Retail price: {Retail_Price}</strong></div>
</div>
<br style="clear:both; line-height: 0px" />
</div>
</div>

hopefully you can help thanks!