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.