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)