Change the view of posts in grid or list. Used on LDVA
var listPosts = $('.list-post-cards');
$('.filters__item--view button').click(function(e) {
e.preventDefault();
$('.filters__item--view button').removeClass('js-active');
$(this).addClass('js-active');
var selectedView = $(this).data('view');
if ( $(listPosts).hasClass('list-view') && selectedView == 'list-view' ) {
return;
} else if ( $(listPosts).hasClass('grid-view') && selectedView == 'grid-view' ) {
return;
} else {
$(listPosts).removeClass('list-view grid-view');
$(listPosts).addClass(selectedView);
}
});
<div class="filters__item--view">
<button class="btn grid-view i-font-after js-active" data-view="grid-view">Grid View</button>
<button class="btn list-view i-font-before" data-view="list-view">List View</button>
</div> <!-- .filters__item--view -->
.filters__item--view {
display: none;
@include breakpoint( $md ) {
display: block;
text-align: center;
margin-bottom: 120px;
position: relative;
&:after {
content: '';
background-color: rgba($black, .4);
display: block;
position: absolute;
width: 1px;
left: 50%;
top: -10px;
bottom: -10px;
}
button {
color: #273346;
display: block;
letter-spacing: 1px;
display: inline-block;
line-height: 1;
font-weight: 400;
padding: 10px 0;
position: relative;
&:hover {
color: $black;
}
&.js-active {
color: $red;
&:hover {
color: $red;
}
}
}
.grid-view {
padding-right: 40px;
margin-right: 60px;
&:after {
content: $i_grid;
font-size: 24px;
position: absolute;
right: 0;
top: 7px;
}
}
.list-view {
padding-left: 45px;
&:before {
content: $i_list;
font-size: 24px;
position: absolute;
left: 0;
top: 0;
}
}
}
}