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