Раскрытие по клику в записи WordPress

В этой записи я писала, как сделать раскрытие по клику для одного из нескольких блоков на странице. Что делать, если это требуется для записи WordPress?

Допустим, у нас есть две картинки и при нажатии на одну, должна отобразиться другая.  Добавляем картинки в запись одну под другой. С помощью редактора блоков к каждой картинке добавляем класс и идентификатор (который называется в этом редакторе HTML-якорь). Делается это в свойствах блока после клика на слово “Дополнительно”. Допустим для первой картинки у нас будет идентификатор pic с добавлением номера картинки – pic1, pic2 и так далее.  Второй картинки даем идентификатор pic11, pic21 и так далее. Добавляем к ним классы – для первой picture-top, для второй picture-bottom. Теперь остается только описать свойства css и добавить скрипт.

.picture-bottom {
    display: none;
}

.picture-top {
    cursor: pointer;
}

Скрываем вторую картинку, а для первой меняем указать мыши, чтобы было понятно, что это ссылка.

$(document).ready(function(){
    $('.picture-top').click(function(){
        var clickId = $(this).attr('id');
        var textId = '#' + clickId;
        var textId1 = '#' + clickId + '1';

        $(textId).slideToggle(100);
        $(textId1).slideToggle(100);        
    });
});

Здесь получаем идентификатор первой картинки, определяем по нему идентификатор второй и переключаем видимость.