Как в Тильде сделать аккордеон из ZeroBlock

Данная модификация позволяет сделать аккордеон из ZeroBlock, либо обычных блоков, например, заголовок и текст

аккордеон в зеро блоке

Из стандартных блоков
Из ZeroBlock

Пример аккордеона из стандартных блоков в Tilda

Данный пример состоит из стандартных блоков, заголовок TL04 и текст TX01

Пример заголовка 1

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Пример заголовка 2

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Пример заголовка 3

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Пример заголовка 4

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Пример заголовка 5

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Инструкция для установки аккордеона из стандартных блоков в Tilda

Данная инструкция для установки аккордеона из стандартных блоков, заголовок TL04 и текст TX01

Копируете скрипт в T123;;
Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
Создаете заголовок TL04;
Устанавливаете заголовку класс «uc-accordion-bd-tit»;
Создаете текстовый блок TX01;
Устанавливаете блоку класс «uc-accordion-bd-txt»
Дублируете блоки, чередуете — заголовок сверху, текст снизу;
Заполняете настройки*;
Публикуете страницу.

Для того чтобы получить ссылку на иконку, создайте ZeroBlock, вставьте иконку в поле картинки, вызовите контекстное меню кликом правой кнопки мышки и нажмите «Copy image URL», после скройте блок в настройках.

Лучше берите иконку в формате SVG.

Ширина задается в настройках блока, в примере 10 колонок.

*Настройки помечены комментариями в коде.

Код примера

<!--
 * 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>

Копировать код

Пример аккордеона из ZeroBlock в Tilda

Данный пример состоит из ZeroBlock

Пример заголовка 1

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Пример заголовка 2

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Пример заголовка 3

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Пример заголовка 4

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Пример заголовка 5

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Инструкция для установки аккордеона из ZeroBlock в Tilda

Данная инструкция для установки аккордеона из ZeroBlock

Копируете скрипт в T123;
Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
Создаете ZeroBlock для заголовка;
Устанавливаете заголовку класс «uc-zero-acc-tit»;
Ставите текст заголовка;
Ставите иконку;
Группируете и выбираете Object;
Устанавливаете группе тег header;
Создаете ZeroBlock для контента;
Наполняете любым контентом;
Устанавливаете блоку класс «uc-zero-acc-txt»
Дублируете блоки, чередуете — заголовок сверху, текст снизу;
Заполняете настройки*;
Публикуете страницу.

Для того чтобы получить ссылку на иконку, создайте ZeroBlock, вставьте иконку в поле картинки, вызовите контекстное меню кликом правой кнопки мышки и нажмите «Copy image URL», после скройте блок в настройках.

Если вы используете иконку по ссылке, то на место иконки ставьте шейп нужного размера, если вам не нужно чтобы иконка меняла цвет, то поставьте изображение нужной иконки, а в переменную впишите none вместо url ('…).

Лучше берите иконку в формате SVG.

*Настройки помечены комментариями в коде.

Код примера

<!--
 * Name: Аккордеон из ZeroBlock
 * Description: Скрипт позволяет создать аккордеон из ZeroBlock, 
   с возможностью установить свое изображение стрелки,
   а так же добавлять любой контент в скрытое поле
 * Author: ANKU
 * URL: https://anku.one/accordion#zero
-->
<style>
    :root {
        --accordion-zero-icon: url('https://static.tildacdn.com/tild6238-3266-4630-b437-343832613666/chevron.svg');
        --accordion-zero-icon-color: #f7f7f7; /* Цвет иконки */
        --accordion-zero-icon-color-hover: #eb5547; /* Цвет иконки при наведении */
        --accordion-zero-icon-color-active: #f8402f; /* Цвет иконки активный */
        --accordion-zero-color-hover: #eb5547; /* Цвет текста при наведении */
        --accordion-zero-color-active: #f8402f; /* Цвет текста активный */
    }
</style>
<script>
const ACCORDION_ZERO_ANIMATION_TIME = 300; // Время анимации в миллисекундах
// Не менять код ниже этого комментария
function accordionTildaZeroBlock(){$(".uc-zero-acc-tit header").on("click",function(){var o=$(this).closest(".uc-zero-acc-tit"),c=o.next(".uc-zero-acc-txt");$(".uc-zero-acc-txt").not(c).slideUp(ACCORDION_ZERO_ANIMATION_TIME),$(".uc-zero-acc-tit").not(o).removeClass("active"),c.stop(!0,!0).slideToggle(ACCORDION_ZERO_ANIMATION_TIME,function(){setTimeout(function(){t_lazyload_update()},ACCORDION_ZERO_ANIMATION_TIME)}),o.toggleClass("active")}),console.log("Хочешь скрипт аккордеона из ZeroBlock для Tilda, смотри эту статью: https://anku.one/accordion ")}"loading"!==document.readyState?accordionTildaZeroBlock():document.addEventListener("DOMContentLoaded",function(){accordionTildaZeroBlock()});
</script>
<style>
.uc-zero-acc-tit header{cursor:pointer}.uc-zero-acc-tit .accordion-icon>*{background-color:var(--accordion-zero-icon);-webkit-mask-image:var(--accordion-zero-icon);mask-image:var(--accordion-zero-icon);-webkit-mask-size:contain;mask-size:contain;background-color:var(--accordion-zero-icon-color);transition:background-color .3s ease,transform var(--accordion-zero-animation-time) ease}.uc-zero-acc-tit .accordion-icon img{opacity:0!important}.uc-zero-acc-tit .accordion-title>*{transition:.3s!important;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (any-pointer:fine){.uc-zero-acc-tit header:hover .accordion-title>*{color:var(--accordion-zero-color-hover)!important}.uc-zero-acc-tit header:hover .accordion-icon>*{background-color:var(--accordion-zero-icon-color-hover)!important}}.uc-zero-acc-tit header:active .accordion-title>*{color:var(--accordion-zero-color-hover)!important}.uc-zero-acc-tit.active header .accordion-title>*{color:var(--accordion-zero-color-active)!important}.uc-zero-acc-tit header:active .accordion-icon>*{background-color:var(--accordion-zero-icon-color-hover)!important}.uc-zero-acc-tit.active header .accordion-icon>*{background-color:var(--accordion-zero-color-active)!important;transform:rotate(180deg)}.uc-zero-acc-txt{display:none}
</style>

Копировать код

Дополнение

Данный скрипт можно адаптировать под любые блоки, телом аккордеона может выступать любой стандартный блок тильда.

Если есть подобные задачи, пишите!