Switch List/Grid View using jquery

Using Delegate and Undelegate in jQuery

In this tutorial you can get strong and good introduction to switch list grid view layouts of any HTML listing with jQuery.

A common web interface feature is dynamic view switcher and you’ll find sometimes buttons to change the layout of a web page from display lists to smaller grids.

Let’s coding the basic HTML:

The HTML isn’t very complicated but contains a lot of repetitive code. Towards the top I have included two links with the classes list and grid.

<div id="box">
<div class="buttons">
<button class="grid">Grid</button>
<button class="list">List</button>

<ul class="list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
<li>List 6</li>
<li>List 7</li>

We will bind a click event handler onto these two buttons i.e. list and grid later on.

Read Also: Add table row dynamically in jQuery

Looking at CSS Styles:

Using jQuery we can change it between grid and list, then apply css for each.

#box ul { list-style: none; }
#box .buttons { margin-bottom: 20px; }
#box .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }
#box .grid li { float: left; width: 20%; height: 50px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 20px; }

jQuery Switch Effects:

Let’s look at the opening bind method:

$('button').on('click',function(e) {
if ($(this).hasClass('grid')) {
$('#box ul').removeClass('list').addClass('grid');
else if($(this).hasClass('list')) {
$('#box ul').removeClass('grid').addClass('list');

See DEMO Online.


So, this article should give you a strong introduction for manipulating your page layouts with jQuery and developing with the jQuery library can make your code JavaScript easier than ever before!

Leave a Reply

Your email address will not be published. Required fields are marked *