Какой правильный способ добавления классов к элементам?

1. Чтобы добавить класс к элементам, можно использовать методы JavaScript, такие как `classList.add()` или `className`.
   
Пример: 
```html
<div id="myElement"></div>
<script>
    const element = document.getElementById('myElement');
    element.classList.add('myClass');
</script>
```

2. Чтобы реализовать появление блока с фильтрами, можно использовать CSS для установки свойства `display: none;` по умолчанию, а затем изменить его на `display: block;` или `display: flex;` с помощью JavaScript при выполнении определенного действия.

Пример:
```html
<button onclick="showFilters()">Показать фильтры</button>
<div id="filters" style="display: none;">
    <!-- Содержание блока с фильтрами -->
</div>
<script>
    function showFilters() {
        const filters = document.getElementById('filters');
        filters.style.display = 'block';
    }
</script>
```

Это простой способ реализации появления блока с фильтрами, но существуют и другие способы, например, использование анимаций CSS или библиотеки JavaScript для управления анимациями.

1. Совсем банальный: вешайте класс на родительский блок. 
 
 2. Через :has 
 
.catalog__info:has(.catalog-filter.active)  .catalog__wrapper {
    margin-bottom: 50px;
}

.catalog__info:has(.catalog-filter.active)  .catalog__btn {
    display: none;
}
 
 
 3. Самый интересный: с помощью кастомных свойств. 
 
.catalog-filter {
  --open-btn-display: block;
  --margin: 0;
}

.catalog-filter.active {
  --open-btn-display: none;
  --margin: 50px;
}

.catalog__wrapper {
  margin-bottom: var(--margin);
}

.catalog__btn {
  display: var(--open-btn-display);
}
 
 
 p.s. Зачем вам две кнопки, если они в одном месте в разметке, я не придумала. Меняете текст и стили и всё. Тогда уж логичнее закрывающую засунуть внутрь всего открываемого блока, тогда и не нужно с ней отдельных манипуляций.