Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Switch list/grid view using jQuery

    @mukul.kant
    Recommendations Offline Message

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 2.73k
    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>
    html HTML5 css css3 JQuery switching between list and grid view using jquery Switch list view uisng jquery Switch grid view using jquery how to switch list/grid view using jQuery
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: