МОДИФИКАЦИЯ

Уникальный аккордеон из блока «TX16N2»

Делаем уникальные аккордеоны из блока TX16N2 всего за 7 минут

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.
More products

Свадебные площадки
«Anstar House»

— Свадьбы мечты проводятся здесь
— Уникальное сочетание всех преимуществ ресторана, гостиницы и загородной площадки в одном месте по лучшей цене
— Не ищите компромиссы. Выбирайте лучшее!
Свадебный замок на берегу озера
Дом на берегу озера
Дом на Дмитровке
Домики для двоих

Как это сделано?

1. Создаём блок TX16N2
2. Создаём блок который хотим встроить в него
3. Прописываем id блоков в коде
4. Добавляем код в блок Т123, публикуем и готово!

Этот код вставить в блок Т123

Скопированно

<script>
document.addEventListener("DOMContentLoaded", function() {
  const moveConfigs = [
    // { blockId: 'id блока, который будет добавлен в аккордеон',
    // targetContainerId: 'id конкретного аккордеона', 
    // targetClass: 'класс: который мы не меняем никогда' }
    { blockId: 'rec693676436', targetContainerId: 'accordion1_693656231', targetClass: '.t668__textwrapper' },
    { blockId: 'rec693682971', targetContainerId: 'accordion2_693656231', targetClass: '.t668__textwrapper' },
    { blockId: 'rec693688318', targetContainerId: 'accordion3_693656231', targetClass: '.t668__textwrapper' },
    // и так далее...
  ];

  // Перебираем массив конфигураций и выполняем перемещения
  moveConfigs.forEach(({ blockId, targetContainerId, targetClass }) => {
    const blockToMove = document.getElementById(blockId);
    const targetContainer = document.getElementById(targetContainerId);

    if (blockToMove && targetContainer) {
      const targetElement = targetContainer.querySelector(targetClass);
      if (targetElement) {
        targetElement.parentNode.insertBefore(blockToMove, targetElement);
      }
    }
  });
});
</script>


<style>

/*Настройка ширины блока*/
.t668 .t-container {
    max-width: 1326px;
}
.t668__col {
    max-width: 1326px;
}

/*Скругление углов у аккордеона */
.t668__wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}

/*Стили надзаголовка в шапке аккордеона*/
.t668__title span[style="color: rgb(0, 0, 0);"] {
    display: inline-block;
    /*padding: 5px 10px;*/
    /*background-color: #D3EEFF;*/
    /*border-radius: 30px;*/
    font-size: 14px;
    font-weight: 500;
    color: #61B3FF !important;
    margin-bottom: 10px;    /*Отступ снизу*/
}

/*-----Настройка открытия аккордеона-----*/
.t668__content {
    max-height: 0px;
    display: flex !important;
    flex-wrap: wrap;
    transition: all 0.4s ease-in-out !important;
    /*padding: 30px !important;*/
}

/*при наведении на аккардеон увеличиваем его высоту*/
@media screen and (min-width: 1200px){
    .t668__wrapper:hover .t668__content:not(.t668__wrapper > .t668__header.t668__opened + .t668__content) {
        max-height: 100px !important;
        transition: all 0.3s ease-in;
    }
}
/*-----Стилизация текстовой части внутри аккордеона-----*/
.t668__textwrapper {
    order: -1;  /*Делаем текст выше добавленного блока*/
}
.t668__text{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
/*Стилизуем каждую кнопку внутри аккордеона*/
.t668__textwrapper .t668__text span[style="color: rgb(0, 0, 0);"] {
    display: inline-block;
    padding: 6px 16px;
    background-color: #f7f7f7;
    color: black !important;
    border-radius: 100px;
    align-self: center;
}
/*Стилизация текста под кнопками*/
.t668__text span[style="color: rgb(119, 119, 119);"] {
    width: 100%;
}

/*-----Стилизация нумерации аккордеона-----*/
span[style="color: rgb(0, 108, 255);"] {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #0F79F5;
    border-radius: 100px;
    line-height: 40px;
    text-align: center;
    color:  white !important;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Onest';
    position: absolute;
    top: 30px;
    right: 30px;
}

.t668__icon {
    display: none; /*Скрываем иконку*/
}

/*-----Добавлям снизу белый градиент-----*/
.t668__content:after {
    content: "";
    display: block;
    width:  100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(0deg, #ffffff, rgb(255 255 255 / 0%));
    border-radius: 0 0 16px 16px;
    transition: all 0.3s ease-in;
}

.t668__header.t668__opened + .t668__content:after {
    height: 0px;
}



/*-----Добавляем цветную полоску слева-----*/
.t668__wrapper,
.t668__wrapper:before{
   transition: all 0.3s ease-in; 
}
/*Изначальное положение и размер полоски*/
.t668__wrapper:before{
    content: "";
    width: 0px;
    height: 100%;
    display: block;
    background-color: #a2805d;
    position: absolute;
    top: 0;
    z-index: 1;
    transition: all 0.3s ease-in;    
}
/*Размер полоски при наведении на аккордеон и его открытии*/
.t668__wrapper:has(.t668__header.t668__opened):before,
.t668__wrapper:hover:before {
    content: "";
    width: 5px;
    height: 100%;
    display: block;
    background-color: #a2805d;
    position: absolute;
    top: 0;
    z-index: 1;
    transition: all 0.3s ease-in;
}


/*Стили для мобилки*/
@media screen and (max-width: 640px){
    .t668__trigger-button {
        padding: 30px 70px 30px 30px!important;
    }
    .t668__wrapper{
        border-radius: 16px;
    }
    
    .t668__title{
        font-size: 20px !important;
    }
}
</style>

Что-то не получается?

Спросите у меня в чате ниже, я с удовольствием вам помогу!
Made on
Tilda