Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Switch list/grid view using jQuery

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 2.17k
    Comment on it

    Hi all, Below is an example of switching between list and grid view using jQuery.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $( document ).ready(function() { $('.show-list').click(function(){ $('.wrapper').addClass('list-mode'); }); $('.hide-list').click(function(){ $('.wrapper').removeClass('list-mode'); }); }) </script>

    If you want to use such switching between list and grid view as shown in above example then, follow/use the below scritp and html code.

    Script:-

    $( document ).ready(function() {
        $('.show-list').click(function(){
        $('.wrapper').addClass('list-mode');
    });
    
        $('.hide-list').click(function(){
        $('.wrapper').removeClass('list-mode');
        });
    })
    

    HTML:-

    <div class="wrapper">
        <header>
            <a href="javascript:void(0)" class="show-list"><i class="fa fa-bars"></i></a>
            <a href="javascript:void(0)" class="hide-list"><i class="fa fa-th"></i></a>
        </header>
        <div class="container">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: