Сортировка div-ов. Как реализовать?

Question

[EnderToy]

Есть несколько див-ов, к ним нужно присвоить тег, скажем через класс, и добавить кнопки, которые будут скривать все диви и отображать только один тег. Наверно это джава, но я не знаю как подключить и что написать. Помогите, пожалуйста.
Вод код:

<div class="content">
        <!-- Номер1 -->
        <div class="item">
            <img src="" alt="" class="item-img">
            <p>Ном1</p>
            <div class="item-text">
                <a href="" class="link">Ссылка1</a>
                <a href="" class="link">Ссылка2</a>
            </div>
        </div>
        <!-- Номер2 -->
        <div class="item">
            <img src="" alt="" class="item-img">
            <p>Ном2</p>
            <div class="item-text">
                <a href="" class="link">Ссылка3</a>
                <a href="" class="link">Ссылка4</a>
            </div>
        </div>
    </div>

Answer 1

[Toy Boy]

Стили сам пропиши. (через пару дней удалю)

JavaScript препроцессор JQuery

Comments

[EnderToy]

Хм, спасибо, но что значит "JavaScript препроцессор JQuery"? Я подключил js файл, но ничего не происходит.. html открываю напрямую в браузере

[Toy Boy]

в body подключаешь "JQuery"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

[EnderToy]

Toy Boy, спасибо за помощь. Код сохранил.

[EnderToy]

Прошу прощение за беспокойство. Возможно ли одному див-у присвоить 2 тега одновременно? Например, первому и "app", и "web"? Так не получилось:
<div class="item" data-cat="app web"></div>

[Toy Boy]

EnderToy, если я понял вопрос, то https://stackoverflow.com/questions/44821247/filte...

[EnderToy]

Toy Boy, спасибо, но используя этот скрипт, производится плавная анимация. Ее можно отключить, сделать так, чтобы лишнее скрывалось?

$(document).ready(function(){
    var targets = $('.filter'),
        buttons = $('.filter-button').click(function(){
            var value = $(this).data('filter');
            if(value == "all")
                buttons.removeClass('checked');
            else
                $(this).toggleClass('checked');

            var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){return $(btn).data('filter');}); //create array of filters

            if(checkedClasses.length === 0)
                targets.show('1000');
            else
            {
                var selector = '.' + checkedClasses.join('.'), //create selector of the combined classes
                    show = targets.filter(selector);
                targets.not(show).hide('3000');
                show.show('3000');
            }
        });
});

[EnderToy]

EnderToy, targets.show(); - убрать цифры