List/Grid View Switcher with fade-in/out transitions using jQuery

In almost every e-commerce website that you are designing, the feature to switch between list and grid view is very essential to facilitate better display of the huge product catalog. This is very simple to achieve using jQuery, as you can visualize the very minimal version in the jsfiddle showcased here.

To make this more complete, I experimented showcasing product catalog with fade-in and fade-out transitions while switching between grid and list views. In this post, let us see how to create fading list/grid view switcher with components to display product catalog using jQuery and css.

DEMO DOWNLOAD

1. First let us prepare the content to be dynamically styled according to the view selected. I have used font-awesome icons for displaying list and gridview switch controls in the demo and it is absolutely optional, you can choose to use buttons or links. So first let us place the switching controls inside body tag.

<div id="viewcontrols">
       <a class="gridview">
         <i class="fa fa-th fa-2x"></i>Grid
       </a>
       <a class="listview active">
         <i class="fa fa-list fa-2x">List</i>
       </a>
</div>

Next let us add an unordered list containing product details. Each list-item represents one product and I have displayed only one list below, since it is the same for all products. In the demonstration, I have used eight products, that means I have used the list-item eight times.

<ul class="list">
    <li>
        <img src="images/barbie_8.jpg" height="250px" width="250px"/>
 <section class="list-left">
 <span class="title">PRODUCT NAME</span>
 <p>Product description goes here. Aliquam tincidunt diam varius 
                 ultricies auctor. Vivamus faucibus risus tempus, 
                 adipiscing justo
        </p>
 <div class="icon-group-btn">           
  <a title="Add to Cart" href="javascript:void(0);" class="btn-cart"> 
  <span class="icon-cart"></span>
  <span class="icon-cart-text">
   Add To Cart      
  </span>
  </a>
  <a title="Add to wishlist" href="#" class="btn-wishlist">
  <span class="icon-wishlist"></span>
  <span class="icon-wishlist-text">
   Add To Wishlist      
  </span>
  </a>
  <a title="Add to Compare" href="#" class="btn-compare">
  <span class="icon-compare"></span>
  <span class="compare-text">
   Add To Compare      
  </span>
  </a>
 </div>  
 </section>
 <section class="list-right">
  <span class="price">$50</span>
  <span class="detail"><a class="button">Details</a></span>
 </section>
 </li>
</ul>

2. Next we need two different css styles for displaying list and grid views. I have not displayed miscellaneous css styles here that are not mandatory to achieve list and grid layouts. However if you like to design a product catalog exactly like what is shown in the demonstration you can download this project and use it.

LIST LAYOUT

ul.list{
width: 800px;
margin-right: 15%;
margin-left: 15%;
}
ul.list li {
background: #F7F7F7;
border-bottom: 1px dotted #CCC;
margin-bottom: 50px;
padding-right: 20px;
height: 250px;
}
ul.list li img{
float: left;
margin-right: 10px;
padding-bottom: 0;
border-bottom: 2px solid transparent;
}
ul.list li p{
overflow:hidden;
word-wrap:break-word;
width:250px;
}
ul.list li .title{
overflow:hidden;
word-wrap:break-word;
font-size:24px;
}
ul.list li .list-left{
width:300px;
position:absolute;
padding-left:260px;
}
ul.list li .list-right{
width:150px;
float:right;
}
ul.list li .price{
float:right;
font-size:56px;
display: block; 
margin-right: 10px; 
text-align: right;
width:100%;
color:#4FAFC2;
}
ul.list li .detail{
float:right;
display:block;
}

GRID LAYOUT

ul.grid li { float: left; width: 265px; height: 440px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC;margin:20px; background:#F7F7F7; }
ul.grid li img{text-align:center;width:100%;}
ul.grid li p{display:none;}
ul.grid li .list-left{text-align:left;font-size:24px;margin-left: 10px;margin-top:10px;}
ul.grid li .icon-group-btn{font-size:14px;}
ul.grid li .list-right{display:block;width:100px;margin-left: 10px;}
ul.grid li .list-right .price{font-size:24px;display:block;color:#4FAFC2;}
ul.grid{
width: 950px;
margin-left: 10%;
}

3. Finally let use jQuery to switch between grid and listviews with fade-in and fade-out effect.

<script type="text/javascript">
$(document).ready(function () {    
var elem=$('ul');      
$('#viewcontrols a').on('click',function(e) {
 if ($(this).hasClass('gridview')) {
  elem.fadeOut(1000, function () {
  elem.removeClass('list').addClass('grid');
  elem.fadeIn(1000);
         });      
 }
 else if($(this).hasClass('listview')) {
  elem.fadeOut(1000, function () {
  elem.removeClass('grid').addClass('list');
  elem.fadeIn(1000);
        });         
 }
});
});
</script>

That is all. Do not forget to include jQuery library reference inside head tag of your html. Enjoy the demo and download the project to see how other components inside every list-item is styled.

DEMO DOWNLOAD

If you like my articles and find them useful, do signup for newsletter in the box below to get my articles delivered directly to your inbox. Thanks for reading!

Subscribe to GET LATEST ARTICLES!