Skip to content

Instantly share code, notes, and snippets.

@alex-boom

alex-boom/switcher-view.html

Created December 21, 2018 10:57
Show Gist options
  • Save alex-boom/216ba0a2a12b10970c4b84b669f9124b to your computer and use it in GitHub Desktop.
Save alex-boom/216ba0a2a12b10970c4b84b669f9124b to your computer and use it in GitHub Desktop.
Download ZIP
switcher-view
Raw
switcher-view.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>switcher view</title>
<style>
.switches.active {
color: red;
}
.product-block.list-view {
width: 100%;
}
.product-block.grid-view {
width: 50%;
}
</style>
</head>
<body>
<div class="product-block">
<ul>
<li>
<span class="switches active" data-view="list-view">
<i class="icon icon-h-list"></i>
<span class="text">list</span>
</span>
</li>
<li>
<span class="switches" data-view="grid-view">
<i class="icon icon-v-list"></i>
<span class="text">grid</span>
</span>
</li>
</ul>
<div class="product-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla incidunt sequi modi cupiditate earum rem blanditiis, natus excepturi quas, officiis corporis accusamus dolores repudiandae, deserunt fugiat laudantium consectetur ipsa expedita. Laboriosam quam et voluptates voluptas, ut reiciendis illum rerum accusamus vel magni perspiciatis officiis, porro consequuntur tempora odio repellendus possimus neque ea minus assumenda velit cum deserunt quod omnis sint!</p>
</div>
<div class="product-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla incidunt sequi modi cupiditate earum rem blanditiis, natus excepturi quas, officiis corporis accusamus dolores repudiandae, deserunt fugiat laudantium consectetur ipsa expedita. Laboriosam quam et voluptates voluptas, ut reiciendis illum rerum accusamus vel magni perspiciatis officiis, porro consequuntur tempora odio repellendus possimus neque ea minus assumenda velit cum deserunt quod omnis sint!</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
jQuery(function() {
initChangeView();
});
function initChangeView() {
var listClass = 'list-view';
var gridClass = 'grid-view';
var activeClass = 'active';
var holder = jQuery('.product-block');
var switchBtn = jQuery('.switches');
holder.removeClass(listClass + ' ' + gridClass);
switchBtn.each(function(){
var current = jQuery(this);
var attrView = current.data('view');
if (current.hasClass(activeClass)){
holder.addClass(attrView);
}
current.on('click', function(e){
e.preventDefault();
switchBtn.removeClass(activeClass);
current.addClass(activeClass);
switch(attrView) {
case listClass:
holder.addClass(listClass).removeClass(gridClass);
break;
case gridClass:
holder.addClass(gridClass).removeClass(listClass);
break;
}
});
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment