jquery plugin to toggle list view and column view for bootstrap

Question

I'm trying to put together a script to toggle grid and list group views. I want to keep the code as light as possible utilizing the bootstrap classes. I'll eventually add the additional classes col-lg-* etc... and work on the cookie script but for now, I'm trying to wrap some classes using wrapAll, wrap an nwrapper. The first time you click the grid view button, works fine and everytime after that the list view does as well however I'm stuck with trying to fix the grid view after the second click. Perhaps another set of eyes can help me see what I am doing wrong.

Here is a demo of what I'm working on: Toggle List Grid View.

This is script thus far:

$(document).ready(function() {
  $('#grid').click(function() {
    $('#products').fadeOut(300, function() {
      $(this).addClass('row-group').fadeIn(300);
      $(this).removeClass('list-group').fadeIn(300);
      $('#grid').addClass('disabled');
      $('#list').removeClass('disabled');

      $('.item').removeClass('list-group-item row');
      $('.item').wrap('<div class="col-md-4" />');

      $(this).nwrapper({
        wrapEvery: 3,
        defaultClasses: false,
        extraClasses: ['row']
      });
      $.cookie('list_grid', 'g');
    });
    return false;
  });

  $('#list').click(function() {
    $('#products').fadeOut(300, function() {
      $(this).removeClass('row-group').fadeIn(300);
      $(this).addClass('list-group').fadeIn(300);
      $('#grid').removeClass('disabled');
      $('#list').addClass('disabled');

      $('.col-md-4').unwrap(); // unwraps nwrapper above

      $('.item').addClass('list-group-item row');
      $('.item').unwrap('<div class="col-md-4" />');

      $('.inner').nwrapper({
        wrapEvery: 2,
        defaultClasses: false,
        extraClasses: ['col-md-9']
      });

      $('.list-group-image').wrap('<div class="col-md-3" />');
      $.cookie('list_grid', null);
    });
    return false;
  });
});

Solution

In the example you provide (switching between grid / list view) the wrapping seems kind of complex.

I think you could switch between grid and list view by making the grid view default (using Bootstrap's grid classes). Switch to the list view by adding a list-group-item class and undo the grid styles for width and floating. See: http://bootply.com/78753

css:

.item.list-group-item {
  /*reset the grid float and width and add a background for fun */
  float: none;
  width: 100%;
  background-color: green;
}

/* give the image a left float in the list view */
.item.list-group-item img {
  float: left;
}

/* and clearfix the left float of the image */
.item.list-group-item:before,
.item.list-group-item:after {
  display: table;
  content: " ";
}

.item.list-group-item:after {
  clear: both;
}

javasacript:

$('#list').click(function() {
  $('#products .item').addClass('list-group-item');
});
$('#grid').click(function() {
  $('#products .item').removeClass('list-group-item');
});

html

<div class="container">
  <div class="btn-group">
    <a href="#" id="list" class="btn btn-primary btn-sm">
      <span class="glyphicon glyphicon-th-list"></span>&nbsp;List</a>
    <a href="#" id="grid" class="btn btn-default btn-sm">
      <span class="glyphicon glyphicon-th"></span>&nbsp;Grid</a>
  </div>

  <div id="products" class="row list-group">
    <div class="item col-lg-4">
      <img class="group list-group-image" src="http://dummyimage.com/300x150/000/fff&amp;text=logo" />
      <h4 class="group inner list-group-item-heading">List group item heading 1</h4>
      <p class="group inner list-group-item-text">...</p>
    </div>

    <!--repeat items here -->

  </div>
</div>

update it make sense to add / remove the clearfix class by jquery too:

$('#list').click(function() {
  alert('tolist');
  $('#products .item').addClass('list-group-item clearfix');
});
$('#grid').click(function() {
  $('#products .item').removeClass('list-group-item clearfix');
});

above will reduce your css to:

.item.list-group-item {
  float: none;
  width: 100%;
  background-color: green;
}

.item.list-group-item img {
  float: left;
}