LitSpecSort
From ThornsWiki
<style>
.sidebar {
max-width:100%;
margin:0px auto;
/*padding:15px 10px;*/
/*background:#e8e4da;*/
/*position:fixed;*/
/*top:0;*/
/*left:0;*/
}
.filters {
display: flex;
flex-wrap: wrap;
}
h3.sort-title {
font-size: 1.15rem !important;
border-bottom: 2px solid #474440 !important;
margin-top: 0px !important;
color:#ccc5b9;
}
.button-group { flex:30%; padding:5px; }
.button {
background-color: #deb975;
border: none;
border-radius:none !important;
color: #fffcf2;
padding: .25rem .35rem;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: .75rem;
font-family:'Open Sans', sans-serif;
text-transform:uppercase;
letter-spacing:0.025rem;
/*margin: 2px 2px;*/
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button.is-checked {
background:#474440 !important;
}
.button:hover {
background-color: #474440;
color: #fffcf2;
}
.grid {
max-width: 100%;
display: flex;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
margin: 0px auto;
}
.grid-item {
width:30%;
margin:10px;
}
/* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) {
.button-group {
flex: 80%;
}
.grid-item {
min-width:350px;
max-width:90%;
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {
.button-group {
flex: 100%;
}
.grid-item {
min-width:350px;
max-width:90%;
}
}
</style> <script
src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item'
});
// store filter for each group
var filters = {};
$('.filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
// flatten object by concatting values function concatValues( obj ) {
var value = ;
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
} </script> </head>
<body>