Аккордеон с иконками

Как добавить иконки в карточки аккордеона на TIlda
Пример работы скрипта
#rec409535626,.uc-docs
#rec409542612,.uc-scripts
Инструкция
  • 1
    Добавьте на страницу аккордеон и задайте ему класс uc-acc-icons через настройки блока
    Скрипт работает с блоками TX16N и TX16N2
  • 2
    Установите скрипт на страницу в HTML-блок
    Скрипт должен быть установлен ниже блока с аккордеоном, в самом конце страницы, или в подвале
  • 3
    Добавьте иконки в карточки аккордеона
    Для этого используйте поле для изображения в карточках аккордеона. Посмотреть как.
  • 4
    Опубликуйте страницу
    Наслаждайтесь результатом!
Скрипт

<script>
appendAccordeonIcons('.uc-acc-icons'); // Указать класс или ID блока с аккордеоном

function appendAccordeonIcons(id) {
    const $wrapper = $(id);

    $wrapper.find('.t668__col, .t-col').each(function() {
        const $header = $(this).find('.t668__title, .t585__title');
        $header.css({
            display: 'flex',
            'align-items': 'center'
        });

       const $originalIcon = $(this).find('.t668__img, .t585__img').eq(0);
        const src = $originalIcon.attr('src');
        $originalIcon.remove();

        const $icon = $(`<img style="width: 30px; margin-right: 10px;" src="${src}">`) // Вы можете изменить размер иконки и отступ от нее до текста
        $header.prepend($icon);
    });
} // Инструкция по работе со скриптом https://trilda.ru/kak-sdelat-akkordeon-s-ikonkami-na-tilde
</script>
Вопросы и комментарии
Made on
Tilda