Как сделать изменение целого блока , подгружая его из php с помощью ajax?

Смог реализовать на javascript , css ,html , но это слишком скажется на оптимизации сайта. https://codepen.io/vadimmbld/pen/MWyXNjz

$(document).ready(function(){
    $('.part').on('click',function(){
        let i = $(this).index();
        if(!$(this).hasClass('current')){
            if(!$('.content').eq(i).hasClass('current')){
                $('.part').removeClass('current');
                $(this).addClass('current');
                $('.content').removeClass('current');
                $('.content').addClass('no-display');
                $('.content').eq(i).removeClass('no-display');
                $('.content').eq(i).addClass('current');
            }
        }
    })
})

Подскажите статью как реализовать вот такой переход с помощью ajax и php (если вместо надписи Страница1 и Страница2 будет длинный контент ,например при помощи помощи этого фильтровать товары), решение на wordpress приветствуется.

Вот "живой пример"(фильтр): https://elson.qodeinteractive.com/shop-compact/