In my project I want to show product list in two ways on single page.

  1. First in gallery way in which 4 products in one row.(This I have already created).
  2. And second in list way(one product at a row) which I will create.

But I actually what I want is that to provide an option to customers whether he/she want the products view in gallery form or in list. Two button(gallery and list) will be provide to them. BY clicking on gallery the view should be like gallery and vice versa.Any idea, how it can be done.

NOTE: Ok, If anyone likes to give negative rating to any question then please also make some effort to explain the reason in the comment section, this won't take long. That will help us to find batter way of asking question.So don't reside your thoughts in your head, Share with everyone, that will be helpful. No Offence !


Set a button, or dropdown menu, that calls a function to set a cookie and to switch between CSS files which contain the _style ID:

function switchStyle(style) {
    var file = $TMPL_URL + '/css/' + style;
    jQuery('head').append('<link rel="stylesheet" href="' + file + '" type="text/css" />');
    jQuery.cookie($TMPL_NAME + '_style', style, {
        expires: 365,
        path: '/'

jQuery.cookie should be replaced with whatever your standard cookie function is. Change expires: 365 to set whatever duration you wish, so the page remembers which setting was chosen for that user.


I suggest either;

1) A simple form with element which appends a parameter in the query string such as domain.com?view=list - you can use this value to alter the display of items in your PHP files.

2) Use javaScript to toggle a class on the parent container for your items, then control the layout with CSS. This should be pretty easy and is the option I'd go for.


Not the answer you're looking for? Browse other questions tagged or ask your own question.