JSFiddle - React, Tailwind, and code Playground

by Joe Mottershaw

HTML

<div id="displayLinks">
<a href="#" target="_self" class="showGrid active">Grid View</a> &nbsp;&bull;&nbsp;
<a href="#" target="_self" class="showList">List View</a>
</div>

<div id="products">
    
    <ul class="grid">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
    </ul>
    
</div>

CSS

body {
    padding: 20px;
}

.clear {
    clear: both;
}

#displayLinks {
    margin: 0 0 20px;
}

#displayLinks a.active {
    font-weight: bold;
}

#products ul {
    width: 600px;
    list-style: none;
}

#products .list li {
    width: 500px;
    height: 60px;
    border: 1px dotted #aaa;
    margin: 0 0 10px 0;
    padding: 5px;
}

#products .grid li {
    width: 150px;
    height: 150px;
    border: 1px dotted #aaa;
    margin: 0 10px 10px 0;
    padding: 5px;
    float: left;
}

JavaScript

var productListWidth = "500px";
var productListHeight = "60px";
var productListMarginRight = "0";

var productGridWidth = "150px";
var productGridHeight = "150px";
var productGridMarginRight = "10px";

var productViewDelay = 1000;

$('.showGrid').click(function() {
    
    $('#products ul li').animate({
        width: productGridWidth,
        height: productGridHeight,
        marginRight: productGridMarginRight
    }, productViewDelay);
        
    $('#products ul li').css({ float: "left" });
    
    setTimeout(function(){
        $('#products ul').removeClass('list').addClass('grid');
    }, productViewDelay);
    
    $('#displayLinks a.showGrid').addClass('active');
    $('#displayLinks a.showList').removeClass('active');
    
});   

$('.showList').click(function() {
    
    $('#products ul li').animate({
        width: productListWidth,
        height: productListHeight,
        marginRight: productListMarginRight
    }, productViewDelay);
    
    setTimeout(function(){
        $('#products ul li').css({ float: "none" });
        $('#products ul').removeClass('grid').addClass('list');
    }, productViewDelay);
    
    $('#displayLinks a.showList').addClass('active');
    $('#displayLinks a.showGrid').removeClass('active');
    
});