Отлично, у нас есть первый фильтр и первый переключатель.

Давайте добавим заготовку для ещё одного переключателя. Класс для второго фильтра будет называться toaster.

Затем «отрепетируем» переключение фильтра без использования JavaScript. Для этого пока будем менять HTML-код вручную. При переключении фильтра происходят два события:

Первое. В переключателе класс active перемещается на текущий фильтр:

Было:
<div class="toggle-controls">
  <button class="filter1 active" type="button"></button>
  <button class="filter2" type="button"></button>
</div>

Стало:
<div class="toggle-controls">
  <button class="filter1" type="button"></button>
  <button class="filter2 active" type="button"></button>
</div>

Второе. У блока с большим фото меняется класс текущего фильтра:

Было:  <div class="photo filter1"></div>
Стало: <div class="photo filter2"></div>