Optimize ineffiecient Jquery - UX list to grid view 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

&lt;span class="btn grid active"&gt;grid&lt;/span&gt;
&lt;span class="btn list"&gt;list&lt;/span&gt;

&lt;div class="wrapper"&gt;
  &lt;div class="results-wrapper"&gt;
    &lt;ul class="results"&gt;
      &lt;li class="grid_3"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/&gt;
      &lt;/li&gt;
      &lt;li class="grid_3"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/&gt;
      &lt;/li&gt;
      &lt;li class="grid_3"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/&gt;
      &lt;/li&gt;
      &lt;li class="grid_3"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/&gt;
      &lt;/li&gt;
      &lt;li class="grid_3"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/&gt;
      &lt;/li&gt;
      &lt;li class="grid_3"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/&gt;
      &lt;/li&gt;
      &lt;li class="grid_3"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/&gt;
      &lt;/li&gt;
      &lt;li class="grid_3"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/&gt;
      &lt;/li&gt;
      &lt;li class="grid_3"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/&gt;
      &lt;/li&gt;
      &lt;li class="grid_3"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;


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%;
}
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%;
}