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

Как добавить иконки в карточки аккордеона на TIlda
Пример работы скрипта
Доставка в любую точку мира
We are a leading firm in providing quality and value to our customers. Each member of our team has at least 5 years of legal experience. We love what we do.
Аккуратная погрузка
Our managers are always ready to answer your questions. You can call us during the weekends and at night. Also, you can visit our office for a personal consultation.
Полная безопасность
Our company works according to the principle of individual approach to every client. This method allows us to succeed in tasks of any level.
Оплата всеми способами
Our company works according to the principle of individual approach to every client. This method allows us to succeed in tasks of any level.
#rec409535626,#rec409538559
#rec409542612,#rec409534297
Инструкция
1
Добавьте на странице аккордеон
Скрипт работает с блоками TX16N и TX16N2
2
Установите скрипт на страницу в HTML-блок
Скрипт должен быть установлен ниже блока с аккордеоном или в самом конце страницы
3
В первой строке скрипта укажите ID блока с аккордеоном
Вы можете использовать один скрипт для нескольких аккордеонов, копируя первую строку и меняя в ней ID блока с аккордеоном, а также изменить размер иконки и отступ от нее до заголовка элемента.
4
Добавьте иконки в карточки аккордеона
Для этого используйте поле для изображения в карточках аккордеона. Посмотреть как.
5
Опубликуйте страницу
Наслаждайтесь результатом!
Скрипт
<script>
appendAccordeonIcons('#rec123456789'); // Указать ID блока с аккордеоном
appendAccordeonIcons('#rec123456780'); // Указать 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);
    });
}
</script>
Поблагодарить автора
Вопросы и комментарии
Made on
Tilda