How To Create List And Grid View Using JavaScript

Websolutionstuff | Dec-23-2020 | Categories : jQuery CSS HTML

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.

Create HTML file

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>

 

 

Add CSS

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; }

 

Add JavaScript

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:

list_and_grid_view

 


You might also like:

Recommended Post
Featured Post
How to Upgrade from Angular 16 to Angular 17
How to Upgrade from Angular 16...

Hey everyone! If you're a developer working with Angular, you know how exciting it is when a new version is released...

Read More

Mar-18-2024

Laravel 9 Livewire File Upload Example
Laravel 9 Livewire File Upload...

In this article, we will see the laravel 9 livewire file upload example. Here, we will learn how to upload files us...

Read More

Dec-02-2022

How To Add Bootstrap Modal In React JS
How To Add Bootstrap Modal In...

In this article, we will see how to add a bootstrap modal in react js. In this example, we will use the bootstrap m...

Read More

Sep-09-2022

Google Autocomplete Address In Laravel 8
Google Autocomplete Address In...

In this example we will see how to google autocomplete address in laravel 8. In laravel 8 google autocomplete address tu...

Read More

Aug-16-2021