Dynamic Viewing Modes

[slvr99]

Im modifying a dynamic product list plugin. I'm trying to to add dynamic viewing options.

I want the user to be able to switch between these 3 viewing options without having to refresh the page. Once the user decides to view more results, the page would refresh and more results would be displayed, with the same viewing option enabled.

The code below filters products by price range then runs a loop to display product information using divs.

       
 // loop over the query list 
$.each(pageProducts, function(i, object) {  
// get min and max price range for price range filter slider   
setPriceRange(parseFloat(object.price)); 
countCellData++; // flug to know if there is content                
cell += '<div style="width: 765px; height: 134px;">'; 
cell += '<div style="float: left;"><img src="'+object.image+'" alt="'+object.title+'" title="'+object.title+'" longdesc="'+object.id+'" border="0" ><\/div>';
cell += '<div style="float: left;">'+object.title+'<\/div>';
cell += '<div style="float: left;">'+object.price+'<\/div>';
cell += '<div style="float: left;">'+object.category+'<\/div>';
cell += '<\/div>';

I would like to use the same information (object.title, object.price, etc.) but i want to display the results in different ways using different div styling.

I had the idea of using "click" JavaScript event, to trigger an event that would implement another div with different styling.

.click( handler(eventObject) )
http://api.jquery.com/click/

Any ideas or thoughts would be helpful. Thx for reading

[slvr99]

I'm sorry for double posting