В этом видео мы сделаем аккордеон из Zero блоков. На Tilda.

Регистрируйтесь на лучшем конструкторе для создания сайтов Tilda: Регистрация здесь

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

<script>
   $( document ).ready(function() {
     //Прописываем ID Блоков Контента
     var accordContent = ["#rec184601495","#rec184601866","#rec184603132"];  
    //Добавляем классы к нашим  блокам
     let i = 0; let number = 0;
     for(let i = 0; i < accordContent.length; i++){
     $(accordContent[i]).addClass('accordC').hide(); };  
     $( 'a[href="#accordicon"]' ).addClass('accordicon');
     $( 'a[href="#accord"]' ).addClass('accord');
     $( '.accordicon' ).click(function(e) {e.preventDefault();}); 
     $( '.accord' ).click(function(e) {e.preventDefault();
       //Вычисляем заголовок  
      if(!$(this).hasClass("accblk") ){
        $( '.accord' ).removeClass('accblk');
        $(this).addClass('accblk');
        $('.accordC').slideUp(500); $('.accordicon').show(500);
        number = $('.accord').index(this);   
        $(accordContent[number]).slideToggle(300);
        $('.accordicon:eq('+number+')').toggle(300);
        }else{
        $( '.accord' ).removeClass('accblk');
        $('.accordC').slideUp(500); $('.accordicon').show(500);
        };
});  });
</script>
Пример выполнен исключительно из зеро блоков
Как выполнить данный пример:

1) Добавили 3 (можно и больше) зеро блока с заголовками
2) Добавили 3 (можно и больше) зеро блока с контентов
3) Добавили код на страницу в блок ДРУГОЕ►Т123
4) Кнопке прописываем ссылке #accord
В коде заменили ID зеро блоков
+
Заголовок №1
Zero block
create your own block from scratch
+
Заголовок №2
Zero block
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
+
Заголовок №3
Zero block
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
+
Заголовок №4
Zero block
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
+
Заголовок №5
Zero block
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Скрипты и инструкции взяты и используются с официального сайта mo-ti.ru
Пожертвование на развитие проекта
Другие полезные уроки и статьи
Оставить заявку:
Написать мне в:
Нажимая кнопку, вы принимаете Положение и Согласие на обработку персональных данных
Есть вопросы?
Напишите мне