Аккордеон с иконками
Скрипт работает с стандартными блоками TX16N и TX16N2
Пример
Блок TX16N
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.
Пример
Блок TX16N2
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.
Инструкция
1. Добавьте на страницу стандартный аккордеон (блок TX16N или TX16N2) и задайте ему класс "uc-acc-icon" через настройки блока.
Как задать класс блоку описал тут.
2. Добавьте иконки в карточки стандартного аккордеона через кнопку "Загрузить файл".
Для этого используйте поле для изображения в карточках аккордеона.
ВАЖНО! Работает только с иконками в формате .SVG
См. скриншот
Как задать класс блоку описал тут.
2. Добавьте иконки в карточки стандартного аккордеона через кнопку "Загрузить файл".
Для этого используйте поле для изображения в карточках аккордеона.
ВАЖНО! Работает только с иконками в формате .SVG
См. скриншот
3. Добавляем HTML код на страницу, в блок Другое - Т123
Важно! Скрипт должен быть установлен ниже блока с аккордеоном
Важно! Скрипт должен быть установлен ниже блока с аккордеоном
HTML код в блок T123
<!-- Добавляем в стандартный аккордеон иконки -->
<!-- Инструкции: https://sitebelov.ru/kak-sdelat-akkordeon-s-ikonkami-na-tilde -->
<script>
appendAccordeonIcons('.uc-acc-icon');
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>
