Toggle Between List and Gridview with CSS and jQuery

by

Creative view mode switcher with jQuery and CSS that lets users to toggle between list and gridview with cool animations. Generally its a complete one page template for view mode that comes with CSS loader, back to top button & animations.

Plugin Preview

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin: Creative View Mode
Author: Mirza Hodzic
Licence: MIT Licence
Published: January 18, 2024
Repository: Fork on GitHub
Dependencies: jQuery 2.3.1 or Latest version, Masonry and GSAP’s TweenMax.
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 21 KB
Demo Download

How to Use Toggle Between List and Gridview :

1. Load the jQuery and all necessary assets for view mode in HTML document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.0/plugins/ScrollToPlugin.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/demo.js"></script>

2. Following is the complete HTML structure for list/grid view switcher.

 <!-- coidea:grid-list START -->
    <section class="grid-holder">

      <!-- coidea:grid-list:navigation+switcher START -->
      <div class="grid-list-layout">
        <nav class="navigation">
          <li><a href="https://coidea.website/categories/challenges/creative-view-mode-switch-animation"><span>Article</span></a></li>
          <li><a href="https://github.com/COIDEAwebsite/creative-view-mode-switch-animation"><span>Github</span></a></li>
          <li><a href="https://coidea.website/categories/drafts/microsite-concept-with-rotating-background"><span>Previous</span></a></li>
        </nav>
        
        <div class="grid-list-holder">
          <span class="grid-layout active">
          <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
          <g>
            <g>
              <path d="M176.792,0H59.208C26.561,0,0,26.561,0,59.208v117.584C0,209.439,26.561,236,59.208,236h117.584
                C209.439,236,236,209.439,236,176.792V59.208C236,26.561,209.439,0,176.792,0z M196,176.792c0,10.591-8.617,19.208-19.208,19.208
                H59.208C48.617,196,40,187.383,40,176.792V59.208C40,48.617,48.617,40,59.208,40h117.584C187.383,40,196,48.617,196,59.208
                V176.792z"/>
            </g>
          </g>
          <g>
            <g>
              <path d="M452,0H336c-33.084,0-60,26.916-60,60v116c0,33.084,26.916,60,60,60h116c33.084,0,60-26.916,60-60V60
                C512,26.916,485.084,0,452,0z M472,176c0,11.028-8.972,20-20,20H336c-11.028,0-20-8.972-20-20V60c0-11.028,8.972-20,20-20h116
                c11.028,0,20,8.972,20,20V176z"/>
            </g>
          </g>
          <g>
            <g>
              <path d="M176.792,276H59.208C26.561,276,0,302.561,0,335.208v117.584C0,485.439,26.561,512,59.208,512h117.584
                C209.439,512,236,485.439,236,452.792V335.208C236,302.561,209.439,276,176.792,276z M196,452.792
                c0,10.591-8.617,19.208-19.208,19.208H59.208C48.617,472,40,463.383,40,452.792V335.208C40,324.617,48.617,316,59.208,316h117.584
                c10.591,0,19.208,8.617,19.208,19.208V452.792z"/>
            </g>
          </g>
          <g>
            <g>
              <path d="M452,276H336c-33.084,0-60,26.916-60,60v116c0,33.084,26.916,60,60,60h116c33.084,0,60-26.916,60-60V336
                C512,302.916,485.084,276,452,276z M472,452c0,11.028-8.972,20-20,20H336c-11.028,0-20-8.972-20-20V336c0-11.028,8.972-20,20-20
                h116c11.028,0,20,8.972,20,20V452z"/>
            </g>
          </g>
          <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g>
          </svg>
        </span>
          <span class="list-layout">
          <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    <g>
      <g>
        <path d="M100.923,0C64.276,0,34.462,29.814,34.462,66.462s29.814,66.462,66.462,66.462c36.647,0,66.462-29.814,66.462-66.462
          S137.57,0,100.923,0z M100.923,103.385C80.563,103.385,64,86.821,64,66.462s16.563-36.923,36.923-36.923
          c20.36,0,36.923,16.563,36.923,36.923S121.283,103.385,100.923,103.385z"/>
      </g>
    </g>
    <g>
      <g>
        <path d="M462.769,22.154h-256c-8.157,0-14.769,6.613-14.769,14.769V96c0,8.157,6.613,14.769,14.769,14.769h256
          c8.157,0,14.769-6.613,14.769-14.769V36.923C477.538,28.767,470.926,22.154,462.769,22.154z M448,81.231H221.538V51.692H448
          V81.231z"/>
      </g>
    </g>
    <g>
      <g>
        <path d="M100.923,189.538c-36.647,0-66.462,29.814-66.462,66.462s29.814,66.462,66.462,66.462
          c36.647,0,66.462-29.814,66.462-66.462S137.57,189.538,100.923,189.538z M100.923,292.923C80.563,292.923,64,276.36,64,256
          s16.563-36.923,36.923-36.923c20.36,0,36.923,16.563,36.923,36.923S121.283,292.923,100.923,292.923z"/>
      </g>
    </g>
    <g>
      <g>
        <path d="M462.769,211.692h-256c-8.157,0-14.769,6.613-14.769,14.769v59.077c0,8.157,6.613,14.769,14.769,14.769h256
          c8.157,0,14.769-6.613,14.769-14.769v-59.077C477.538,218.305,470.926,211.692,462.769,211.692z M448,270.769H221.538v-29.538H448
          V270.769z"/>
      </g>
    </g>
    <g>
      <g>
        <path d="M100.923,379.077c-36.647,0-66.462,29.814-66.462,66.462S64.276,512,100.923,512c36.647,0,66.462-29.814,66.462-66.462
          S137.57,379.077,100.923,379.077z M100.923,482.462c-20.36,0-36.923-16.563-36.923-36.923c0-20.36,16.563-36.923,36.923-36.923
          c20.36,0,36.923,16.563,36.923,36.923C137.846,465.898,121.283,482.462,100.923,482.462z"/>
      </g>
    </g>
    <g>
      <g>
        <path d="M462.769,401.231h-256c-8.157,0-14.769,6.613-14.769,14.769v59.077c0,8.157,6.613,14.769,14.769,14.769h256
          c8.157,0,14.769-6.613,14.769-14.769V416C477.538,407.843,470.926,401.231,462.769,401.231z M448,460.308H221.538v-29.538H448
          V460.308z"/>
      </g>
    </g>
    <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g>
          </svg>
        </span>
        </div>
      </div>
      <!-- coidea:grid-list:navigation+switcher END -->

      <!-- coidea:grid-list:main-section START -->
      <div class="grid masonry">
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Cycling 2019</h2>
              <p class="date"><span>Updated</span> MARCH 16, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Secret Dataset</h2>
              <p class="date"><span>Updated</span> MARCH 14, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Public Dataset</h2>
              <p class="date"><span>Updated</span> MARCH 11, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Android Sheet</h2>
              <p class="date"><span>Updated</span> MARCH 06, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>iOS Sheet</h2>
              <p class="date"><span>Updated</span> MARCH 02, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Private Dataset</h2>
              <p class="date"><span>Updated</span> FEBRUARY 16, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Lorem Sheet</h2>
              <p class="date"><span>Updated</span> FEBRUARY 15, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Ipsum Dataset</h2>
              <p class="date"><span>Updated</span> FEBRUARY 12, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Android Sit</h2>
              <p class="date"><span>Updated</span> FEBRUARY 10, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>iOS Dolor</h2>
              <p class="date"><span>Updated</span> FEBRUARY 06, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
            </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Cycling 2018</h2>
              <p class="date"><span>Updated</span> FEBRUARY 02, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Cycling 2017</h2>
              <p class="date"><span>Updated</span> JANUARY 16, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Cycling 2016</h2>
              <p class="date"><span>Updated</span> JANUARY 15, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Cycling 2015</h2>
              <p class="date"><span>Updated</span> JANUARY 13, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Cycling 2014</h2>
              <p class="date"><span>Updated</span> JANUARY 10, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Cycling 2013</h2>
              <p class="date"><span>Updated</span> JANUARY 04, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Cycling 2012</h2>
              <p class="date"><span>Updated</span> JANUARY 03, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
        <div class="masonry__item">
          <figure>
            <figcaption class="content">
              <h2>Cycling 2011</h2>
              <p class="date"><span>Updated</span> JANUARY 02, 2019</p>
              <ul class="tags">
                <li><a href="#!">VARIABLE</a></li>
                <li><a href="#!">PROPERTY</a></li>
                <li><a href="#!">SPEED</a></li>
                <li><a href="#!">LOREM</a></li>
                <li><a href="#!">IPSUM</a></li>
                <li><a href="#!">SIT</a></li>
                <li><a href="#!" class="more" data-click-state="1">+</a></li>
              </ul>
            </figcaption>
          </figure>
        </div>
        
      </div>
      <!-- coidea:grid-list:main-section END -->

    </section>
    <!-- coidea:grid-list END -->

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X