using ‘add class’ to switch from grid to list

Make sure to have jQuery and bootstrap CSS installed

the HTML

First, we create two buttons.

– One is to indicate list form. The id of this button is list.
– The second button is to indicate grid form. The id of the button is grid

<span class="glyphicon glyphicon-th-list"></span> List

</a>

<span class="glyphicon glyphicon-th"></span> Grid

</a>

</div>

We place the buttons inside a container, with class btn-group. The sibling div has an id of products. This is where we place our contents. Hence, we have a div for out buttons. And another div to maintain our contents

...

</div>

...

</div>

In our content div, the default situation is that we have grids, with content inside them. We create grids by using class col-lg-4 in order to control width. col-lg-4 says we have the grid to have a with of 4 parts, while the total is 12 parts. This means we have three grids for each row. In other words, we want the width to be 33.3333%.

</div>

We then fill in the contents with an image, a title, and some text.

<h4 class="group inner list-group-item-heading">List group item heading 1</h4>

<p class="group inner list-group-item-text">shooo ryu ken!!! lorem ipsum</p>

</div>

Finally, we have something like so:

<h1>Let's test grid list system</h1>

</div>

<h4 class="group inner list-group-item-heading">List group item heading 1</h4>

<p class="group inner list-group-item-text">shooo ryu ken!!! lorem ipsum</p>

</div>

<h4 class="group inner list-group-item-heading">List group item heading 2</h4>

<p class="group inner list-group-item-text">hadoooooo ken!</p>

</div>

<h4 class="group inner list-group-item-heading">List group item heading 3</h4>

</div>

</div>

</div>

this will give us a starting point looking like this.

jQuery

The whole trick to making it go from grid to list is to add a class. Then let CSS take over to change the display according to the class.

Hence, the first step is to simply add a class name. Let’s add list-group-item for when the user clicks on the list button. And remove this class when the user clicks on the grid button.

jQuery(document).ready(function() {

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

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

});

</script>

We use jQuery to do this. We simply grab the id of the buttons. Then process the click event. We implement the handler for when the button is clicked. We say, when the buttons is clicked, for each div.item under #products, we want to add a class list-group-item to that div.

When we click on button #list, we add class list-group-item. Thus you’ll dynamically see the class name appear in the DOM. This enables us to use CSS to give it a new look on the fly.

When we click on the button again, the class disappears. Visually, we can use CSS to return it to its default appearance.

the CSS

Now, we get to the part where we change the appearance.

First, we include the style.css in your header

1	<link rel="stylesheet" type="text/css" href="styles.css">

Now, let’s say we want to give appearances of a green border for the grid. And make this green border disappear when its list.

1	<div class="item col-lg-4"></div>

.item {

border: 2px solid green;

}

.item.list-group-item {

border: none;

}

Now when you click the grid list

1	<div class="item col-lg-4 list-group-item"></div>

you add the class to the div. Via CSS, it will know that for that class, we should put a green border on that div. When you click the list button, the class “list-group-item will disappear, and naturally the CSS of green border will not apply anymore. In fact, the CSS for .item, is no border.

The biggest difference between grid and list is that our grid is 33.33%. But a list should take up 100% width. So that’s what we’ll do:

.item {

border: 2px solid green;

}

.item.list-group-item {

float: none;

width: 100%;

border: none;

}

Thus, you’ll be able to toggle it like so:

Basically, that’s all there is to it.

Other stuff

Say I want add a red border around the image when its list form. And clean up some margin spacing issues:

.item.list-group-item img {

border: 2px solid red;

margin-top:15px;

margin-bottom: 15px;

}

Then I want to put the word list before the list items.

.item.list-group-item:before {

content: "list: ";

}

As you can see, just make sure to put CSS for .item.list-group-item because you’re drawing for list form.

Whatever CSS you applied to list-group-item will be gone when you remove the class.