1
\$\begingroup\$

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%;
}
\$\endgroup\$
1
\$\begingroup\$

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%;
}
\$\endgroup\$
  • \$\begingroup\$ 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 \$\endgroup\$ – 2ne Oct 28 '13 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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