How do I insert a toggle inside a spry datset row

[hotrattz]

I'm using a spry dataset to view data off an .xml file for an online store. There's your basic stuff, picture link, headline, price, description, item number etc.

 

The description set can vary as descriptions do with different items I'd like to only show the first few lines (140 characters or something) of the description upon load and then allow the visitor to toggle open the rest of the description. Is there a way to do that? Here is the code I'm currently using, just your basic dreamweaver insert.

 

<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/{Thumbnail}"></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>

 

my friend gave me this code but doesn't seem to work:

 

<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/{Thumbnail}"></a></div>

</div>

<div class="StackedContainer">

<a href="#">Show Description</a>

<div class="StackedInner" style="display:none">

<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>

</div>

<br style="clear:both; line-height: 0px" />

</div>

</div>

 

Jquery

 

$(document).ready(function(){

 

$('.StackedContainer a').on('click',function(event){

 

event.preventDefault(); // prevent the link from any action

 

var thisBtn = $(this); // cache

thisBtn.parent().find('.StackedInner').toggle(); // toggle the description

 

}); // close on click

})