jQuery: folder view

In this post I will show you a basic implementation of a folder view obtained through jQuery and CSS. We'll provide two views to our users: a view where all elements feature a large icon and another view where all elements are laid out as a simple list with smaller icons. This effect can be achieved by simply switching to a specific CSS class with jQuery. Said that, let's see our basic markup:

<div id="folder">
   
   <div id="toolbar">
     <a href="#" id="list">View as list</a>
     <a href="#" id="icons">View as icons</a>
   </div>

 <ul id="folders">
  <li>
   <p>Web</p>
  </li>
  <li>
   <p>Tutorials</p>
  </li>
  
  <li>
    <p>Examples</p>
  
  </li>
  
 </ul>

</div>

This is a basic example, but if you want to add further actions to your elements, simply add a link within each folder item. Here's our CSS:

body {
 margin: 0;
 padding: 2em 0;
 font: 76% Tahoma, sans-serif;
}

#folder {
 width: 400px;
 margin: 0 auto;
 height: 100%;
 overflow: hidden;
}

#folder ul {
 width: 100%;
 height: 100%;
 overflow: hidden;
 margin: 0;
 padding: 0;
 list-style: none;
}

#folder ul li {
 width: 100px;
 margin-right: 5px;
 padding-top: 112px;
 background: url(large.png) no-repeat;
 float: left;
}

#folder ul li p {
 margin: 0;
 padding-top: 4px;
 text-align: center;
 font-weight: bold;
}

#folder ul li.list {
 width: 200px;
 padding: 0 0 0 45px;
 float: none;
 margin: 0 0 0.5em 0;
 background: url(small.png) no-repeat;
 height: 42px;
 line-height: 42px;
}

#folder ul li.list p {
 padding: 0;
 display: inline;
}

#toolbar {
 height: 40px;
 background: url(bg.png) repeat-x;
 margin-bottom: 1em;
 line-height: 40px;
 text-align: center;
}

#toolbar a {
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 padding: 0 1em;
 text-transform: uppercase;
}

As you can see, it's the CSS class list that actually turns our horizontal folder view into a vertical one. Here jQuery has only to trigger the switch between these two views using the aforementioned class:

$(function() {

  $('#list').click(function(event) {
  
    $('li', '#folders').addClass('list');
  
    event.preventDefault();
  
  });
  
  $('#icons').click(function(event) {
  
    $('li', '#folders').removeClass('list');
  
    event.preventDefault();
  
  });


});

You can see the demo below.

Demo

Live demo