Optimize ineffiecient Jquery - UX list to grid view

Question

I am fairly new to jQuery and I am making a new search results page. In this snippet I am switching from a grid to list view and vice versa. Can anyone suggest a cleaner method of performing this change? I did try using a variable to minimize all my (this) calls but I couldn't get them to work. Any help would be much appreciated.

JS

 $('.btn.grid').click(function() {
 if (!$(this).hasClass("active")) {
 $(this).addClass("active");
 $('.results-wrapper .grid_12').removeClass("grid_12").addClass("grid_3");
 $('.wrapper .results').addClass("grid-view-active");
 if ($(".btn.list").hasClass("active")) {
 $(".btn.list").removeClass("active");
 $('.wrapper .results').removeClass("list-view-active");
 }
 }
 });
 $('.btn.list').click(function() {
 if (!$(this).hasClass("active")) {
 $(this).addClass("active");
 $('.results-wrapper .grid_3').removeClass("grid_3").addClass("grid_12");
 $('.wrapper .results').addClass("list-view-active");
 if ($(".btn.grid").hasClass("active")) {
 $(".btn.grid").removeClass("active");
 $('.wrapper .results').removeClass("grid-view-active");
 }
 }
 });

HTML

<span class="btn grid active">grid</span>
<span class="btn list">list</span>
<div class="wrapper">
 <div class="results-wrapper">
 <ul class="results">
 <li class="grid_3">
 <h1>Title</h1>
 <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
 </li>
 <li class="grid_3">
 <h1>Title</h1>
 <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
 </li>
 <li class="grid_3">
 <h1>Title</h1>
 <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
 </li>
 <li class="grid_3">
 <h1>Title</h1>
 <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
 </li>
 <li class="grid_3">
 <h1>Title</h1>
 <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
 </li>
 <li class="grid_3">
 <h1>Title</h1>
 <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
 </li>
 <li class="grid_3">
 <h1>Title</h1>
 <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
 </li>
 <li class="grid_3">
 <h1>Title</h1>
 <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
 </li>
 <li class="grid_3">
 <h1>Title</h1>
 <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
 </li>
 <li class="grid_3">
 <h1>Title</h1>
 <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
 </li>
 </ul>
 </div>
</div>

CSS

.btn {
 background: #ccc;
 cursor: pointer;
 display: inline-block;
 height: 35px;
 width: 35px;
}
.btn.active {
 background: red;
}
li {
 float: left;
 height: 200px;
 width: 200px;
}
li img {
 max-width: 100%;
 max-height: 100%;
}
.grid_3 {
 width: 25%;
}
.grid_12 {
 width: 100%;
}

Answer 1

You can simply use JS to toggle a list class. In CSS, you can simply override the style to either display block (item per row, list style), or display inline-block (several items side-by-side per row, grid style).

A simple demo here:

JS:

$('.btn.grid').click(function (event) {
 event.preventDefault();
 $('.results').addClass('grid');
});
$('.btn.list').click(function (event) {
 event.preventDefault();
 $('.results').removeClass('grid');
});

CSS:

/* default list mode */
.results li{
 padding: 0;
 margin: 0;
 display : block;
}
/* grid mode */
.results.grid li{
 display:inline-block;
 width: 100px;
}
.results img{
 display:block;
 width: 100%;
}

• 2ne: That does work well but i need to have the grid or list class on the container for the css. I also need to add the active state to my buttons