<style>
/* ========== РАСКРЫВАЕМЫЕ БЛОКИ ========== */
.t702 .t-input-group[data-toggle-hidden] {
background-color: #fff;
border-radius: 0 0 4px 4px;
padding: 0 20px; /* паддинг слева и справа по 20 */
margin-top: -12px;
height: 0;
opacity: 0;
overflow: hidden;
transition: height 0.4s ease, opacity 0.3s ease, padding 0.2s ease;
}
.t702 .t-input-group[data-toggle-hidden].visible {
opacity: 1;
padding-top: 0px;
padding-bottom: 4px;
}
/* Стили списков */
.t702 .t-input-group[data-toggle-hidden] ul {
list-style: disc inside;
margin: 0;
padding-left: 10px;
}
/* Отступы и оформление формы */
.t702 .t-input-group {
margin-bottom: 10px;
}
.t-form__inputsbox .t-input-group ul {
padding-left: 0px !important;
}
.t-form__inputsbox .t-input-group:nth-child(2n+7) {
position: relative; /* важно для абсолютного позиционирования чекбокса */
}
.t-form__inputsbox .t-input-group:nth-child(2n+7) .t-text {
box-sizing: border-box;
padding: 24px 40px 24px 20px;
font-weight: 500;
background-color: #fff;
border-radius: 4px;
text-align: left;
}
/* ========== СТИЛИ ЧЕКБОКСОВ ========== */
.t-form__inputsbox .t-input-group:nth-child(2n+7) .t-checkbox__indicator {
background-image: url(https://static.tildacdn.com/tild3135-3133-4165-a133-316136373438/Frame_3597.svg);
background-size: contain;
background-repeat: no-repeat;
width: 14px;
height: 14px;
position: absolute;
right: 20px; /* прилип к правому краю с отступом 20px */
top: 50%;
transform: translateY(-50%);
opacity: 1;
border: none;
pointer-events: none;
}
.t-input-group:nth-child(2n+7) .t-checkbox__indicator:after {
background-image: url(https://static.tildacdn.com/tild3135-3133-4165-a133-316136373438/Frame_3597.svg);
background-size: contain;
background-repeat: no-repeat;
width: inherit;
height: inherit;
left: 0;
top: 0;
transform: none;
border: none;
}
.t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator {
background: none;
}
.t-form__inputsbox .t-input-group:nth-child(2n+7) .t-text {
font-size: 18px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const map = {
licocheck: 8,
telocheck: 10,
maskscheck: 12,
vannicheck: 14,
nogicheck: 16,
masagecheck: 18
};
for (const [name, index] of Object.entries(map)) {
const block = document.querySelector(`.t702 .t-input-group:nth-child(${index})`);
if (!block) continue;
block.setAttribute("data-toggle-hidden", "");
block.classList.remove("visible");
block.style.height = "0px";
const checkbox = document.querySelector(`input[name="${name}"]`);
if (!checkbox) continue;
checkbox.addEventListener("change", function () {
if (checkbox.checked) {
block.classList.add("visible");
block.style.height = "auto";
const fullHeight = block.scrollHeight + "px";
block.style.height = "0px";
requestAnimationFrame(() => {
block.style.height = fullHeight;
});
} else {
block.style.height = block.scrollHeight + "px";
block.classList.remove("visible");
requestAnimationFrame(() => {
block.style.height = "0px";
});
}
});
}
});
</script>