I haven't had much sleep and I'm not sure if toggleClass will work for this situation. Here is the code I currently have:
$(document).ready(function() {
// Slide Mobile Filter Sidebar Onto Screen
$('#showFilters').on('click', function () {
$('.filter-sidebar--mobile__close').attr('class', 'filter-sidebar--mobile__close');
$('.filter-sidebar--mobile')
.removeClass('slide-out-right is-hidden')
.addClass('slide-in-right ');
});
// Slide Mobile Filter Sidebar Off Screen
$('.filter-sidebar--mobile__close').on('click', function() {
$('.filter-sidebar--mobile')
.addClass('slide-out-right')
.delay(380)
.queue(function() {
$('.filter-sidebar--mobile').addClass('is-hidden');
});
// Hide Close Button for Mobile Filter
$('.filter-sidebar--mobile__close').attr('class', 'filter-sidebar--mobile__close is-hidden');
});
});
This code only works through one full cycle.
What happens is;
- On load: no mobile filter(as expected)
- Click #showFilters button
- .filter-sidebar--mobile slides in from the right (as expected)
- Click .filter-sidebar--mobile__close, .filter-sidebar--mobile slides out to the right (as expected)
- Click #showFilters button again
- .filter-sidebar--mobile slides in from the right (again as expected)
- Click .filter-sidebar--mobile__close, .filter-sidebar--mobile animation plays, however this time does not stay hidden