Элегантный способ переключения назад и принудительного включения нескольких элементов css

одним из способов рефакторинга было бы создание функции, которая принимает кнопку видео или кнопку фотографии в качестве входных данных и возвращает объект (карту) идентификаторов и соответствующих классов. то есть функция (назовем ее получитькласскарту), возвращающая

{ '#id-row' : 'display: none', ... } 

когда i/p - кнопка видео и

{ '#id-row' : 'display: block', ... }

когда i/p является фото-кнопкой. Затем переместите логику применения классов, т.е.

function applyStyles(id) {
    const styleIdMap = getClassMap(id);
    $("#ib-row").css(styleIdMap["#ib-row"]);
    $("#ib-pagination").css(styleIdMap["#ib-pagination"]);
    ...
}

Таким образом, в логике нет повторений.

Вы можете попробовать это:

const ibRowAndPagination = ['#ib-row', '#ib-pagination'];
const ibVideoCarouselAndPagination = ['#ib-video-carousel-pagination', '#ib-video-carousel'];
const photosAndVideosButtons = ['#photos-button', '#videos-button'];
const photosAndVideosButtonsToggleClass = () => photosAndVideosButtons.forEach(el => $(el).toggleClass('image-block-media-button-selected'));

$('#videos-button').on('click', function() {
  ibRowAndPagination.forEach(el => $(el).css({'display':'none'}));
  ibVideoCarouselAndPagination.forEach(el => $(el).css({'display':'block'}));
  photosAndVideosButtonsToggleClass();
});

$('#photos-button').on('click', function() {
  ibRowAndPagination.forEach(el => $(el).css({'display':'block'}));
  ibVideoCarouselAndPagination.forEach(el => $(el).css({'display':'none'}));
  photosAndVideosButtonsToggleClass();
});