Gird and List style view onclick by using Jquery

here we are going to see, how to do the grid/list style view mode onclick by using javascript and jquery. this is very simple one. but in this post you have to concentrate on girds in css. but here i done only one gird for my sample. let see the simple thing in this. see the code.

DOWNLOAD LIVE DEMO

this is what how we are making grid to list and list to gird by clicking the icon. that is what we are going to see in this. this is really very good design. let see the code.

CODE

<div id="wrapper">

<ul class="listing-nav">
  <li>View mode: </li>
  <li>
    <a href="#" class="listing-grid">Default View</a>
  </li>
  <li>
    <a href="#" class="listing-full">Compare</a>
  </li>
</ul>
<ul class="listing">
    <li class="one_half last">
    <p>" We know what we are, but know not what we may be. "</p>
    <h3 align="right"> - William Shakespeare</h3>
  </li>
  <li class="one_half">
    <p>" Turn your face to the sun and the shadows fall behind you. "</p>
    <h3 align="right"> - Charlotte Whitton</h3>
  </li>
  <li class="one_half last">
    <p>" Positive anything is better than negative nothing. "</p>
    <h3 align="right"> - Elbert Hubbard</h3>
  </li>
  <li class="one_half">
    <p>" Where there is love there is life. "</p>
    <h3 align="right"> - Mahatma Gandhi</h3>
  </li>
  <li class="one_half last">
    <p>" My best friend is the one who brings out the best in me. "</p>
    <h3 align="right"> - Henry Ford</h3>
  </li>
  <li class="one_half">
    <p>" Nothing will work unless you do. "</p>
    <h3 align="right"> - Maya Angelou</h3>
  </li>
</ul>

<div>

in that, class="one_half" and class="one_half last" that both are align the design, by left and right, and right and left.

JAVASCRIPT

you can see in the above code, class="listing-nav", from that there are two classes, i.e class="listing-grid", class="listing-full".

<script src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
  $(".listing-grid").addClass("listing-active");
  $(".listing-nav").click(function(e) {
      e.preventDefault();
  });   
  
  $(".listing-full").click(function() {
      $(".listing").addClass("listing-full");
      $(this).addClass("listing-active");
      $('.listing-grid').removeClass("listing-active");
  });
  
  $(".listing-grid").click(function() {
      $(".listing").removeClass("listing-full");
      $(this).addClass("listing-active");
      $('.listing-full').removeClass("listing-active");
  });
});
</script>

CSS

* {
    margin:0;
    padding:0;
}
#wrapper {
    padding:40px 15px 0 15px;
    width:50%;
    margin:0 auto;
}
.one_half {
    display:inline;
    width:45%;
    float:left;
    margin:0 4% 0 0;
}
.listing-nav {
    margin-bottom:25px;
}
.listing-nav li {
    display:inline;
    font-size:11px;
    text-transform:uppercase;
    color:#666;
    margin-right:5px;
}
.listing-nav a {
    text-decoration:none;
    background:#ccc url(../img/icon.png) 0 -70px;
    padding:0 10px;
    text-indent:-9999px;
    width:20px;
    line-height:30px;
    display:inline-block;
}
a.listing-active {
    background-color:#287990;
}
.listing-nav a.listing-full {
    background-position:-40px 0px;
}
.listing {
    margin-bottom:-5px;
}
.listing li {
    margin-bottom:25px;
    font-family:Tahoma, Geneva, sans-serif;
    color:#033;
    text-align:justify;
    list-style:none;
 -webkit-transition:all .5s;
 -moz-transition:all .5s;
 -o-transition:all .5s;
 transition:all .5s;
}
.listing.listing-full li.one_half {
    clear:both;
    width:100%;
}
.listing.listing-full li p {
    margin-bottom:10px;
}
.listing p {
    text-decoration:none;
    display:block;
    background:#287990;
    color:#FFF;
    padding:10px 10px 10px 10px;
    position:relative;
}
.listing p:hover {
    background:#0B3480;
 -webkit-transition:all .2s;
 -moz-transition:all .2s;
 -o-transition:all .2s;
 transition:all .2s;
}