View source for Widget:LitSort

<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>

<div class="sidebar">
<div class="filters">
	  <div class="button-group" data-filter-group="origin"><h3 class="sort-title">Kingdom of Origin</h3>
		<button class="button is-checked" data-filter="">All</button>
		<button class="button" data-filter=".Anaxas">Anaxas</button>
		<button class="button" data-filter=".Bastia">Bastia</button>
		<button class="button" data-filter=".Gior">Gior</button>
		<button class="button" data-filter=".Hesse">Hesse</button>
		<button class="button" data-filter=".Hox">Hox</button>
		<button class="button" data-filter=".Mugroba">Mugroba</button>
		<button class="button" data-filter=".Elsewhere">Elsewhere</button>
		</div>
	  <!--div class="button-group" data-filter-group="Type"><h3 class="sort-title">Type of Literature</h3>
		<button class="button is-checked" data-filter="">All</button>
		<button class="button" data-filter=".Fictional_Book">Fictional Book</button>
		<button class="button" data-filter=".Non-Fictional_Book">Non-Fictional Book</button>
		<button class="button" data-filter=".Historical_Text">Historical Text</button>
		<button class="button" data-filter=".Myth">Myth</button>
		<button class="button" data-filter=".Play">Play</button>
		<button class="button" data-filter=".Poetry">Poetry</button>
		<button class="button" data-filter=".Proverb">Proverb</button>
		<button class="button" data-filter=".Serial_Publication">Serial Publication</button>
		<button class="button" data-filter=".Tale">Tale</button>
		<button class="button" data-filter=".Other">Other</button></div-->
</div>
</div>