I'm using isotope.js v 2.2.0, I can sort by ascending and descending respectively but can't seem to get the toggle between asc/desc on one button working.
HTML code:
<div id="sorts" class="btn-group">
<button class="sort-btn sort-asc" data-sort-value="title" data-sort-direction="asc">Title Asc</button>
<button class="sort-btn sort-desc" data-sort-value="title" data-sort-direction="desc">Title Desc</button>
</div>
My script:
$('#sorts .sort-asc').on('click', 'button', function() {
var sortByValue = $(this).attr('data-sort-value');
$container.isotope({sortBy: sortByValue, sortAscending: true});
$this.removeClass('sort-asc').addClass('sort-desc');
});
//similar for ('#sorts .sort-asc')
Once I added in .sort-asc
the sort stops working. I'm not sure how to separate the .sort-asc
and .sort-desc
so that I could add/remove class for the button to have the correct behavior.
Any suggestions would help.
How about this