In this article, we will see how to create a list and grid view using javascript. many times clients have requirements like a toggle between list and grid view. here we will give you an example list and grid view using jquery. So, copy the below code and get the output of the list and grid view example in javascript.
So, let's see how to create a list and grid view using jquery and jquery list view grid view toggle
In this example, I have created one file and added HTML code CSS code, and javascript.
In this step, we will create an HTML file and add the below code for listing items.
<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>
Now, we will create CSS and add the CSS to the head tag or external CSS file.
#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; }
In this step, we will create on click jquery function and change the list view and grid view when clicking on the button.
$('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');
}
});
Output:
You might also like:
In this article, we'll learn how to locate elements using data-attribute values. We can do this using jQuery and CSS...
Jul-11-2022
In this article, we will see how to get data between two dates in laravel 9. Here we will learn how to count d...
Dec-19-2022
In this tutorial we will see how to create middleware for xss protection in laravel 8. Cross-site scripting is...
Dec-22-2021
In the ever-evolving landscape of web development, crafting a tailor-made user authentication system stands as a pivotal...
Aug-25-2023