Today in this example i will show you how to create list and grid view using javascript. many time client's have requirment like toggle between list and gridview,
here i will give you example list and grid view using jquery, So, copy below code and and get output of list and grid view example in javascript.
In this example i have created one file and added html code css code and javascript.
Create HTML file
<div id="container">
<center><h1>
how to create list and grid view using javascript - websolutionstuff.com
</h1><br>
<div class="buttons">
<button class="grid">Grid View</button>
<button class="list">List View</button>
</div></center>
<ul class="list">
<li style="background:lightgray">Item 1</li>
<li>Item 2</li>
<li style="background:lightgray">Item 3</li>
<li >Item 4</li>
<li style="background:lightgray">Item 5</li>
<li>Item 6</li>
</ul>
</div>
Add CSS
#container ul { list-style: none; }
#container .buttons { margin-bottom: 20px; }
#container .list li { width: 100%; border-bottom: 1px margin-top:5px; margin-bottom: 5px; padding: 5px; }
#container .grid li { float: left; width: 20%; height: 50px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 20px; }
Add JavaScript
$('button').on('click',function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
else if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});
And finally you will get output like below image.