<!--
* Name: Аккордеон из блока заголовка и текста
* Description: Скрипт позволяет создать аккордеон из блока заголовка TL04 и текста TX01,
с возможностью установить свое изображение стрелки
* Author: ANKU
* URL: https://anku.one/accordion
-->
<style>
:root {
--accordion-icon: url('https://static.tildacdn.com/tild6238-3266-4630-b437-343832613666/chevron.svg'); /* Ссылка на изображение стрелки */
--accordion-pb-tit: 12px; /* Отступ от заголовка вниз */
--accordion-pb-txt: 24px; /* Отступ вниз от аккордеона */
--accordion-stroke-h: 1px; /* Толщина полосы разделителя */
--accordion-stroke: #323232; /* Цвет полосы разделителя */
--accordion-icon-color: #f7f7f7; /* Цвет иконки */
--accordion-icon-color-hover: #eb5547; /* Цвет иконки при наведении */
--accordion-icon-color-active: #f8402f; /* Цвет иконки активный */
--accordion-color-hover: #eb5547; /* Цвет текста при наведении */
--accordion-color-active: #f8402f; /* Цвет текста активный */
}
</style>
<script>
const ACCORDION_ANIMATION_TIME = 300; // Время анимации (в миллисекундах)
// Не менять код ниже этого комментария
function accordionTildaTitleText(){$('.uc-accordion-hdr-tit [field="title"]').on("click",function(){var t=$(this).closest(".uc-accordion-hdr-tit"),i=t.next(".uc-accordion-bd-txt").find('[field="text"]');$(".uc-accordion-bd-txt").find('[field="text"]').not(i).slideUp(ACCORDION_ANIMATION_TIME),$(".uc-accordion-hdr-tit").not(t).removeClass("active"),i.stop(!0,!0).slideToggle(ACCORDION_ANIMATION_TIME),t.toggleClass("active")}),console.log("Хочешь скрипт аккордеона для Tilda, смотри эту статью: https://anku.one/accordion ")}document.documentElement.style.setProperty("--accordion-animation-time",`${ACCORDION_ANIMATION_TIME}ms`),"loading"!==document.readyState?accordionTildaTitleText():document.addEventListener("DOMContentLoaded",function(){accordionTildaTitleText()});
</script>
<style>
.uc-accordion-bd-txt>*,.uc-accordion-hdr-tit [field=title]{padding-top:0!important;padding-bottom:0!important}.uc-accordion-hdr-tit>*{padding-top:0!important;padding-bottom:var(--accordion-pb-tit)!important}.uc-accordion-hdr-tit [field=title]{position:relative;display:grid;grid-template-columns:1fr 1em;gap:12px;align-items:start;cursor:pointer;transition:.3s;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.uc-accordion-hdr-tit [field=title]::after{content:'';display:block;background-color:var(--accordion-icon-color);-webkit-mask-image:var(--accordion-icon);mask-image:var(--accordion-icon);-webkit-mask-size:contain;mask-size:contain;width:1em;height:1em;transition:background-color .3s ease,transform var(--accordion-animation-time) ease}.uc-accordion-bd-txt>*>*{padding-bottom:calc(var(--accordion-pb-txt)/ 2)!important}.uc-accordion-bd-txt>*>*>*{padding-bottom:calc(var(--accordion-pb-txt)/ 2);border-bottom:var(--accordion-stroke-h) solid var(--stroke)}.uc-accordion-bd-txt [field=text]{padding-bottom:0!important;display:none}@media (any-pointer:fine){.uc-accordion-hdr-tit [field=title]:hover{color:var(--accordion-color-hover)!important}.uc-accordion-hdr-tit [field=title]:hover::after{background-color:var(--accordion-icon-color-hover)}}.uc-accordion-hdr-tit [field=title]:active{color:var(--accordion-color-hover)!important}.uc-accordion-hdr-tit.active [field=title]{color:var(--accordion-color-active)!important}.uc-accordion-hdr-tit [field=title]:active::after{background-color:var(--accordion-icon-color-hover)}.uc-accordion-hdr-tit.active [field=title]::after{background-color:var(--accordion-icon-color-active);transform:rotate(180deg)}
</style>