Building a List/Grid View Switcher with jQuery

CSS :

<style type="text/css" >

        #container ul

        {

            list-style: none;

        }

        #container .buttons

        {

            margin-bottom: 20px;

        }

        #container .list li

        {

            width: 100%;

            border-bottom: 1px dotted #CCC;

            margin-bottom: 10px;

            padding-bottom: 10px;

        }

        #container .grid li

        {

            float: left;

            width: 20%;

            height: 50px;

            border-right: 1px dotted #CCC;

            border-bottom: 1px dotted #CCC;

            padding: 20px;

        }

    </style>

SCRIPT :

<script language="javascript" type="text/javascript">

        $(function() {

            $('input[type=button]').on('click', function(e) {

                if ($(this).hasClass('grid')) {

                    $('#container ul').removeClass('list').addClass('grid');

                }

                else if ($(this).hasClass('list')) {

                    $('#container ul').removeClass('grid').addClass('list');

                }

            });

        });

</script>

BODY :

<div id="container">

        <div class="buttons">

            <input type="button" class="grid" value="Grid View" />

            <input type="button" class="list" value="List View" />

        </div>

        <ul class="list">

            <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>

        </ul>

    </div>