CODEWITHSUNDEEP
javascriptjqueryoptimization
2ne
2ne

Reputation: 5986

jQuery - Search results View - List & Grid

I am fairly new to jQuery and I am making a results page where the user can switch between list and grid view. It does seem to work but when I have a lot of results it seems to be buggy. Can anyone see why this may be?

CODEPEN DEMO

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

Upvotes: 0

Views: 711

Answers (1)

Richards
Richards

Reputation: 11

var gridButton = $('.btn.grid');
var listButton = $('.btn.list');
var isGridActive = true;

gridButton.click(function() { 
  if(!isGridActive) {
    toggleFunction();
  }
});


listButton.click(function() { 
  if(isGridActive) {
    toggleFunction();
  }
});

var toggleFunction = function(){
  listButton.toggleClass("active");
  gridButton.toggleClass("active");

  if(isGridActive) {
    $('.results-wrapper .grid_3').removeClass("grid_3").addClass("grid_12");
  $('.wrapper .results').addClass("list-view-active").removeClass("grid-view-active");
  } else { 
    $('.results-wrapper .grid_12').removeClass("grid_12").addClass("grid_3");
        $('.wrapper .results').addClass("grid-view-active").removeClass("list-view-active");
  }
  isGridActive = !isGridActive;
};

If anyone can make that if statement any better that would be excellent.

Upvotes: 1

Related Questions