Responsive Grid & List View Switcher

Responsive Grid & List View Switcher
a nice Grid & List View Switcher,Responsive.
<div class="container">
<div class="dc-view-switcher">
<button data-trigger="grid-view"></button>
<button data-trigger="list-view" class="active"></button>
</div>
<div data-view="list-view" class="download-cards">
<article class="download-card">
<div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
<div class="download-card__content-box">
<div class="content">
<h2 class="download-card__content-box__catagory">Photos</h2>
<h3 class="download-card__content-box__title">Tool Safety Products</h3>
<p class="download-card__content-box__description">High & low-res photos for print and web media. </p>
<a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
</div>
</div>
</article>
<article class="download-card">
<div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
<div class="download-card__content-box">
<div class="content">
<h2 class="download-card__content-box__catagory">PDF</h2>
<h3 class="download-card__content-box__title">Tool Safety Catalogues</h3>
<p class="download-card__content-box__description">Print and web ready PDF's. </p>
<a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
</div>
</div>
</article>
<article class="download-card">
<div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
<div class="download-card__content-box">
<div class="content">
<h2 class="download-card__content-box__catagory">Photos</h2>
<h3 class="download-card__content-box__title">Height Safety Products</h3>
<p class="download-card__content-box__description">High & low-res photos for print and web media. </p>
<a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
</div>
</div>
</article>
<article class="download-card">
<div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
<div class="download-card__content-box">
<div class="content">
<h2 class="download-card__content-box__catagory">Document</h2>
<h3 class="download-card__content-box__title">Course Booking Form</h3>
<p class="download-card__content-box__description">Word document </p>
<a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
</div>
</div>
</article>
<article class="download-card">
<div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
<div class="download-card__content-box">
<div class="content">
<h2 class="download-card__content-box__catagory">Photos</h2>
<h3 class="download-card__content-box__title">Height Safety Products</h3>
<p class="download-card__content-box__description">High & low-res photos for print and web media. </p>
<a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
</div>
</div>
</article>
<article class="download-card">
<div class="download-card__icon-box"><img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png" /></div>
<div class="download-card__content-box">
<div class="content">
<h2 class="download-card__content-box__catagory">Photos</h2>
<h3 class="download-card__content-box__title">Height Safety Products</h3>
<p class="download-card__content-box__description">High & low-res photos for print and web media. </p>
<a class="button"> <i class="fa fa-cloud-download"></i> Download</a>
</div>
</div>
</article>
</div>
</div>
var downloadGrid = (function(){
"use strict";
var $cardContainer = $('.download-cards');
var $downloadCard = $('.download-card__content-box');
var $viewTrigger = $('button').attr('data', 'trigger');
function swapTriggerActiveClass(e) {
$viewTrigger.removeClass('active');
$(e.target).addClass('active');
}
function swapView(e) {
var $currentView = $(e.target).attr('data-trigger');
$cardContainer.attr('data-view', $currentView);
}
$(document).ready(function(){
// Event Listener
$viewTrigger.click(function(e){
swapTriggerActiveClass(e);
swapView(e);
});
});
})();
codepen demo
See the Pen Download Cards // Responsive Grid & List View Switcher by lee anderson (@mranderson86) on CodePen.