Есть три кнопки:
<nav class="case-nav">
<ul class="case-nav__cats">
<li><button data-switch-category="site">Сайт</button></li>
<li><button data-switch-category="style">Стиль</button></li>
<li><button data-switch-category="present">Презентация</button></li>
</ul>
</nav>
<!-- /.case-nav -->
Так же есть блоки, которые соответствуют данным кнопкам:
<div class="case-thumb-box slick-slide slick-cloned" data-case-category="style present" data-slick-index="25" aria-hidden="true" style="width: 85px; display: none;" tabindex="-1">
<a class="case-thumbnail" href="/case/14" data-title="Экстремальные путешествия" tabindex="-1">
<div style="background-image: url('/portfolio/14/0.jpg')" class="img"></div>
</a>
</div>
Эти блоки имеют дата атрибут: data-case-category. Идея в чем, многие из нас пользуются masonry для выделения нужных карточек, при клике на кнопку. Нужно тоже самое, но работает проще, при клике на кнопку, просто скрываются те карточки, которые не соответствуют кнопке, за это отвечает этот код:
$('.case-nav__cats button').on('click',function() {
var toggle = $(this).data('switch-category');
console.log(toggle);
$('.case-thumbs-wrapper').find('.case-thumb-box').fadeOut();
$('.case-thumbs-wrapper').find('[data-case-category="'+toggle+'"]').fadeIn();
})
Работает исправно, но мне не нравится тот факт, что приходится скрывать все блоки, а потом показывать через fadeIn только те, что нужны. Как можно реализовать просто скрытие тех блоков, которые не имеют дата атрибут кликнутой кнопки? Чтобы не приходилось скрывать все блоки, а показывать те, что нужны.
