Show more
1
1.2
2
3.1
3.2
Инструкция
(скрыть)
  1. Добавь Zero Block c кнопкой, задай кнопке класс tab__button, а блоку в настройках uc-button.
  2. Для вкладок использован блок ME602 (Вкладки с цветом фона). Задай оформление для блока и класс в настройках uc-tab__content. Всем первым вкладкам для кнопки ALL (Все) задай класс uc-first-tab.
  3. После оформления укажи в форме размер шрифта и жирность числом (regular - 400, medium - 500 и т.д).
  4. Новые вкладки добавляются в коле таким же способом, как в коде с Mo-ti. Я оставила инструкцию в самом коде. Написано зеленым. ID блоков нужно вставлять только цифры через запятую без пробела. Иначе все ломается.
  5. Скопируй код и вставь его в блок T123.
<!--Code by Fedyaeva-->
<style>
    :root {
        --font-size: 16px;
        --font-weight: 400;
    }
    .uc-button {display: none;} 
    .t395__tab {display: flex; width: 100%;}
    .t395__title {color: #000000;font-size: var(--font-size)!important;font-weight: var(--font-weight)!important;padding-top: 8px!important;padding-bottom: 8px!important;}
    .t395 .t-container { max-width: 1160px;}
    @media screen and (min-width: 960px) {
        .uc-button {display: block;}
        .t395__wrapper {display: grid;grid-template-columns: repeat(5, 1fr);column-gap: 40px;}
    }
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
    const tabButton = document.querySelector('.tab__button');
    const tabContent = document.querySelector('.uc-tab__content');
    let wrapper = document.querySelector('.t395__wrapper');
    let select = document.querySelector('.t395__select');
    let fTab = document.querySelectorAll('.uc-first-tab');
    fTab.forEach(e => {
        setTimeout(() => {
            e.classList.remove('t395__off');
        }, 20);
    });

    if (window.matchMedia("(min-width: 960px)").matches) {
        tabContent.style.display = 'none';

        tabButton.addEventListener('click', () => {
            tabContent.style.display = 'block';
            document.querySelector('.uc-button').style.display = 'none';
            fTab.forEach(e => e.classList.remove('t395__off'));
        });
    }
    
    /* Для добавления новой строки нужно копировать строки ниже */
    /* В поле data-tab-rec-ids="39707098" нужно указать ID показываемых блоков для этой вкладки */
    /* Вместо Йошкар-Ола написать свое название */
    /*9 вкладка*/ wrapper.insertAdjacentHTML('beforeend', '<div class="t395__tab t395__width_20" data-tab-rec-ids="165975858"><div class="t395__title t-name t-name_xs">Йошкар-Ола</div></div>');
    
    /*9 вкладка*/ select.insertAdjacentHTML('beforeend', '<option value="165975858">Йошкар-Ола</option>');
    
    document.querySelector(".t395__col.t-width.t-width_12").classList.remove("t-width_12");
});
</script>
Made on
Tilda