این مسئله به طراحی قالب شما مربوط می شود. می بایست دو نوع css برای نمایش لیست محصولاتتان داشته باشید که در یک حالت کنار هم و دیگری بصورت لیستی باشد و توسط jQuery می توانید کلاس های خودتان را جابجا کنید بدون اینکه صفحه شما post شود.

با استفاده از متد addClass و removeClass کتابخانه jQuery و یا switchClass کتابخانه jquery-ui می تونید کلاس های یک Element را سمت کاربر تغییر دهید :

$(document).ready(function() {
            $("#pList div").addClass("grid");
        });
        function grid() {
            $("#pList div").switchClass("list", "grid", 500, "swing");
        }
        function list() {
            $("#pList div").switchClass("grid", "list", 500, "linear");
            
        }

براتون یک نمونه کد درست کردم که در ادامه ضمیمه این پست میکنم.

فایل های ضمیمه

• ProductListGrid.rar

یکسری مقادیر از پیش تعریف شده در jquery-ui اند و بهشون می گن easings .برای پویا کردن حرکت div ها استفاده کردم.