<p>
<button class="f-red">Фильтр красных элементов</button>
<button class="f-blue">Фильтр синих элементов</button>
<button class="f-green">Фильтр зеленых элементов</button>
<button class="f-all">Все элементы</button>
</p>
<div class="red">Первый</div>
<div class="red">Второй</div>
<div class="blue">Третий</div>
<div class="green">Четвертый</div>
<div class="red">Пятый</div>
<div class="blue">Шестой</div>
<div class="blue">Седьмой</div>
<div class="green">Восьмой</div>var fActive = '';
function filterColor(color){
if(fActive != color){
$('div').filter('.'+color).slideDown();
$('div').filter(':not(.'+color+')').slideUp();
fActive = color;
}
}
$('.f-red').click(function(){ filterColor('red'); });
$('.f-blue').click(function(){ filterColor('blue'); });
$('.f-green').click(function(){ filterColor('green'); });
$('.f-all').click(function(){
$('div').slideDown();
fActive = 'all';
});
<div class="items"></div>.<select>
<option value="*">Все</option>
<option value=".red">Красные</option>
<option value=".blue">Синие</option>
<option value=".green">Зеленые</option>
</select>$('select').change(function() {
const selector = this.value;
const $items = $('.items >');
$items.filter(selector).slideDown();
$items.not(selector).slideUp();
});