List and Grid view using JQuery

We use all the HTML code for List and grid view Button. Styling List and Grid view buttons by using the body tag selector. Now the styling of List and Grid buttons can be done by using the class selector. When the user press the buttons, the List or grid view will reveal itself.

Now that List or grid view button is enabled, the button text and functionality will switch to List or Grid when the user hits it. The List and Grid View buttons will be easily switched between the two buttons.

List view:

Grid View:

Code used in JQuery:

$(document).ready(function () {
const articles = $(“#articles”);
const articlesClassName = “articles_grid”;
const buttons = $(“.button”);

buttons.click(function () {
buttons.removeClass(“button_active”);
$(this).addClass(“button_active”);
});

$(“#button_list”).click(function () {
articles.removeClass(articlesClassName);
});

$(“#button_grid”).click(function () {
articles.addClass(articlesClassName);
});
});