Как сделать Аккордеон текста в Zero-block, выпадающий список (новая версия)

[@Buddilov]

ПОДАРКИ 🎁🎁🎁 Заходи в мой инстаграм, подписывайся и напиши мне слово "ФАЙЛ". После чего я вышлю тебе бесплатный пдф файл в котором собранно 15 способов по поиску заказов в веб-дизайне Моя инста: instagram.com/buddilovv/

[@zagrutshina]

Я новичок, впервые делала подобный аккордеон для сайта. На других роликах было частичное объяснение, полное предлагали за доп. плату. Вы не пожадничали и все подробно объяснили, спасибо!

[@MR_AVOKADoo]

АКТУАЛЬНО, полная инструкция, так ещё и с несколькими вариантами, все хотят деньги, а вы бесплатно сделали, спасибо вам большое! подписка оформленна)

[@666klim999]

Спасибо. по поводу клика на иконку и вообще всей строки, растянул границу текста на всю ширину блока и разместил поверх иконки, все кликабельно без лишних фреймов.

[@kristinasi4778]

Хитрый ход)

[@ИльяАбрамов-ь1ч]

Дружище, это максимально точный код, который я искал в интернете для огромного прайс листа, в котором у каждой позиции должно открываться описание. Спасибо тебе!

[@kenedihd1282]

Большое спасибо! Посмотрел видео в июне 2023 и оно здорово помогло, подписка)

[@halflife6235]

Поддерживаю, очень приятного когда люди делятся своими знаниями без корысти . У таких людей больше шансов на успех

[@Natas_Satan]

Спасибо огромно! С первым вариантом все было здорово, а новый вообще пушка гонка! Удачи тебе во всем! И как можно больше творческих мыслей! Спасибо!

[@Shugadiva]

Сначала не сработало. Поставила везде автоскейл и взяла скрипт специально для автоскейла. Также добавила невидимый шейп с css с названием accord для заголовка. Заработало. Спасибо, подписываюсь 🦦

[@ЕлизаветаЛьвова-ф9ш]

Спасибо огромное, код отлично работает)

[@Елена-м7]

Благодарю , все доступно и понятно. Спасибо, что делитесь навыками 💖

[@tianakosheleva6433]

Как легко мне все далось, готова расцеловать автора видео, прям человеческое спасибищеееее

[@kennythe0]

Чувак, спасибо тебе, я задолбался смотреть юзлесс видео челов, которые в конце говорят, что им надо купить мозг, чтобы они пошерили код. Или челов, у которых вообще нифига не работает код и им надо писать в телегу, чтобы они там что-то помогали и решали. А с твоим кодом всё буквально летает. Для анимации иконки плюсика в FAQ сделал rotate -45 и длительность 0,4, получилось идеально)

[@Buddilov]

Рад слышать)

[@dsgn-stacy]

Огромная благодарность за такое детальное объяснение!

[@daria_stroganova_]

Супер! Все понятно. Даже у меня, новичка, все получилось с первого раза))) Спасибо!

[@ДарьяПросова]

Не знаю как у других, у меня пока все работает, даже в мобильной версии. Когда доделаю полностью этот блок, то еще раз гляну. А так пока работает все замечательно. Спасибо за это легкое и простое видео😁

[@ЮленькаДенисова]

Я так рада что нашла ваши уроки, оочень помогли мне решить задачу:) с меня лайк и подписка

[@ЭрикКошкин]

Лучший, дай бог тебе здоровья и долголетия

[@МаргаритаВоздвиженская-д6л]

Шикарный аккордеон!! Всё работает плавно, и устанавливается без лишних блоков с кодом) Но у меня тоже не грузится мобильная версия( Кто-нибудь уже фиксил эту проблему проблему?

[@НадеждаПаймукова]

Спасибо!!! Получилось! Но не сразу - почему-то я писала как надо, а потом перепроверила, оказалось везде класс для блока установился не "uc-accord-a-1", а "uc-US-accord-a-1". Не поняла откуда взялось это US, как будто система автоматически выставила. Я же не могла ошибиться 6 раз. В итоге все заработало)

[@ideacraft3111]

Храни вас боженька ❤

[@gulnaz_web]

Спасибо огромное за такое полезное видео!!! Удачи вам и творческих успехов!!!

[@ИринаМоскаленко-и5л]

Спасибо, добрый человек! Код работает, реализовала на сайте💥

[@АртёмА-д9в8т]

Отличное объяснение, спасибо!

[@pixel_bandit]

второе видео, и второй раз пушка! Спасибо, друг.

[@ihor-usenko]

Спасибо огромное. С этим проблем нет! 👍👍👍

[@kristina.denisovaa]

Спасибо большое за доступное объяснение!!!

[@rinatyagafarov5328]

Благодарю за видео. 🔥🔥🔥

[@HealerShmat]

Благодарю ,добрый человек!

[@naida-web]

Спасибо большое 😍👍 все супер получилось 👍👍👍

[@НатальяКабалина-и8о]

Добрый день! Спасибо огромное за код. Можно ли добавить якоря, чтоб открывалась нужная вкладка при переходе с другой страницы?

[@cobzewar]

Спасибо, очень понятно и действительно без воды

[@ЛюдмилаЗырянова]

Спасибо, всё подробно и понятно 🤩

[@ВикторияПрокофьева-х9й]

спасибо! все работает! Плюс в карму))

[@НатальяЩеколкина]

Здравствуйте! А с виндоу контейнером будет работать? И можно ли настроить анимацию разделительных линий при скролле?

[@ba8174]

Огромное спасибо - все получилось и работает как Часы

[@Т.Ф]

Спасибо большое! Однозначно подписка и лайк. Ждём больше полезного контента!🤗

[@imnotsuperman.-.]

Спасибо огромное! Все работает))

[@RAVA17]

Привет Буддилов, подскажи как отключить в твоем коде изменение высоты зеро вместе с высотой аккордеона? Буду благодарен за помощь!

[@paderin_management]

офигенное видео, спасибо!

[@tatianak6824]

Большое спасибо! Все работает и объяснение понятное и доступное. У меня только один вопрос: по моему наблюдению, данный код блокирует функцию overflow visible. Подскажите, пожалуйста, что можно дописать в код, чтобы это пофиксить?

[@ДмитрийНиконов-р9щ]

Приветствую! Все сделал как на видео, но почему то первый блок аккордиона не отображается (отображаются только последующие пять). Не знаешь в чем может быть причина?

[@АлександраЖигдылмеева]

Спасибо большое! Все очень понятно и доступно

[@zaxgr6961]

Спасибо от души тебе, друг!

[@mix_tatii]

Привет, спасибо за полезный урок) А если я применяю autoscale to window width только для моб версии,а все остальные адаптивы у меня обычные, то можно ли код сделать сразу для обоих случаев, потому что при добавлении второго кода для автоскейла у меня ничего не работает(

[@wakeupfitnes]

Оромное спасибо! Все работает 👍👍

[@Elenele-1]

Большое спасибо!

[@ИринаСоболь-о7ь]

Пока все работает, и в мобильной версии тоже) Спасибо!

[@hanagakiarasawa3171]

Большущее спасибо брат!

[@Антон-и3ч6ъ]

Огромное спасибо, с этим кодом все работает отлично =)

[@annamirony6350]

Привет! Все сработало классно А есть ли класс, чтобы скрыть линию при открытии блока?

[@Denis-vl3fi]

Огромное спасибо!!!

[@atropa_belladonna_]

Спасибо большое!

[@alexandrastroganova8625]

Благодарю 😊

[@sofyadmitrieva9022]

Здравствуйте! Большое спасибо, очень помогли) Вчера все работало, а сегодня код будто выключился, уже все перепробовала, ничего не меняется, блоки вопросы-ответы просто идут по-порядку( Не знаете в чем может быть проблема?

[@Алексей-ы3у7ш]

Спасибо! Очень помог

[@СергейКузнецов-ч1и7ы]

спасибо большое, очень сильно помог🙏

[@InTeRnaLPr]

Спасибо!

[@АнжеликаШапошникова-с3й]

Добрый день! Анимация иконок на пк не работает , с телефона всё отлично. Я прозрачным шейпом с классом accord все перекрыла , что бы отовсюду аккордеон раскрывался. Что может быть не так?

[@Pavel_Fedenev]

Возможно поможет тем, у кого не работает - попробуйте поочередно отключать блоки с другим, кастомным html кодом для прочих блоков/элементов и смотреть работает аккордеон или нет, возможно какой-то блок остается отключенным, а код для него активен, вероятно они каким то образом конфликтуют, что произошло и у меня

[@wildwildberries]

Именно такая фигня и была. Код конфликтовал в "конструктором видео" от annexx

[@ValeriValeri-b2m]

топчик! 🔥

[@yason_studio]

Спасибо, дружище

[@ProXimoPG]

Добрый день. Все работает, но почему то при открытом первом блоке при нажатии на второй блок - перекидывает в самый низ страницы сайта...

[@Alexia_AD]

Вопрос. На ру версии сайта это работает прекрасно (спасибо за объяснение), но вот на англ нет.. :( почему ? что поменять надо ?

[@Official-np2rq]

Спасибо огромное

[@dimaso_marketolog]

Спасибо! Мощно )

[@MariLabOfficial]

Спасибо за видео, все максимально точно и понятно! единственный нюанс, по каким-то причинам при публикации сайта - загруженные изображения не отображает В чем может быть причина?😔

[@Buddilov]

Попробуй отключить lazy load у фотографий

[@БрезгуновДмитрий]

Можно ли увеличить скролл как-нибудь?

[@ShkarbatovStas]

Все получилось. Спасибо! Попробовал сделать два блока, но только не друг под другом, а рядом. Немного криво получилось и внизу футер тильды висит, даже если ставлю любой блок после аккордеона. Как быть, никто не подсткажет?

[@Elizaveta_nitsenko]

Ахринеть

[@zhenya_yachmenev]

Огонь

[@Irina_Mecieva]

Здравствуйте, спасибо огромное за видео и код)) на десктопе у меня все работает, а в мобилке нет(( подскажите пожалуйста может нужно что-то исправить?

[@Buddilov]

Привет) Должно работать, попробуй скопировать страницу и уже на новой посмотреть как работает А если и тогда нет, то попробуй другие способ на моём канале

[@ИмяФамилия-у9о7ф]

Получилось решить?

[@korodboty4566]

Как сделать такое оформление сайта? Сделайте пожалуйста видео.

[@Buddilov]

Всем привет) 👽 Код проверил сегодня и всё работает, поэтому если сталкиваетесь с проблемами, то попробуйте пересобрать его на другой странице. Это может вам помочь

[@mynameistemaa]

добрый. сделал дубль страницы, блок перестал работать. перенес на голую страницу, код работает. что может быть не так? использую другие коды. но не пойму что может мешать.

[@timausmanov9113]

чтобы там не было проблем с нажатием на иконки надо в скрипте добавить пару моментов и все заработает. Измененный вариант: $( document ).ready(function() { $(function () { let liter = 'a'; //Литера для сборки let oneAcc = true; // Открывать по одной вкладке false - true let accOpen = false; // Открытая вкладка false - true let openNum = 3; // Номер открытой вкладки let scroll = false; // Скролл к открытой вкладке false - true $('div[class*="uc-accord-'+liter+'"]').each(function(index){ $('.uc-accord-'+liter+'-'+index+':first').addClass('title-accord').attr('data-accord-index', index); $('.uc-accord-'+liter+'-'+index+'').not(':first').addClass('content-accord hide-accord'); }); if(accOpen){ $('div[class*="uc-accord-'+liter+'-'+openNum+'"]').addClass('active-accord'); $('div.content-accord[class*="uc-accord-'+liter+'-'+openNum+'"]').removeClass('hide-accord'); }; function setRecHeight(){ setTimeout(function(){ $('.content-accord').each(function(){ $(this).addClass('time-step'); let hg = $(this).find('.t396__artboard').height(); $(this).height(hg); }); }, 1500); }; setRecHeight(); $(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ setRecHeight() }, 300);}); function videoStop(){ setTimeout(function(){ $('div.content-accord.hide-accord[class*="uc-accord-'+liter+'-"]').each(function(){ let videoNum = $(this).find('div[data-elem-type="video"]').length; if(videoNum){ $(this).find('div[data-elem-type="video"]').each(function(){ $(this).find('').attr( 'src', function ( i, val ) { return val; }); }); }; }); }, 300); }; // измененная строчка ниже $('div[class*="uc-accord-'+liter+'"]').find('.accord, .accord-icon').click(function(e){ let cT = $(this).closest('.title-accord'); let ind = cT.attr('data-accord-index'); if(oneAcc){ //По одной вкладке if( cT.hasClass('active-accord') ){ cT.removeClass('active-accord'); $('div.content-accord.uc-accord-'+liter+'-'+ind+'').toggleClass('hide-accord'); videoStop(); }else{ $('div.title-accord[class*="uc-accord-'+liter+'"]').removeClass('active-accord'); cT.addClass('active-accord'); $('div.content-accord[class*="uc-accord-'+liter+'-"]').addClass('hide-accord'); $('div.content-accord.uc-accord-'+liter+'-'+ind+'').removeClass('hide-accord'); videoStop(); }; }else{ //По несколько вкладок cT.toggleClass('active-accord'); $('div.content-accord.uc-accord-'+liter+'-'+ind+'').toggleClass('hide-accord'); videoStop(); }; if(scroll){ //скролл до вкладки let el = $(this).closest('.r'); setTimeout(function(){ $('html, body').animate({scrollTop: el.offset().top-50 }, 400); }, 600); }; }); }); }); .hide-accord { height: 0!important; pointer-events: none!important; } .content-accord.time-step , .accord-icon { transition: all 0.4s ease-in-out} .content-accord { padding-top: 0!important; padding-bottom: 0!important; overflow: hidden!important; } .active-accord .accord-icon { transform: rotate(180deg)} // измененная строчка ниже .accord, .accord-icon { cursor: pointer}

[@igi.design]

Вы волшебник!!@@timausmanov9113

[@kaeiueje]

У меня не получается почему-то

[@eugennaumov1860]

лайк!

[@alexandermikolyk7987]

Спасибо за видео! Напишите, пожалуйста, где изменить угол поворота иконки в коде?

[@Buddilov]

Привет) В самом внизу есть строка .content-accord.time-step .t396__artboard , .accord-icon { transition: all 0.4s ease-in-out} Здесь вы вписываемся стиль анимации и сколько секунд и есть строка .active-accord .accord-icon { transform: rotate(180deg)} Это уже угол, вместо 180 вписывай своё число

[@alexandermikolyk7987]

@@Buddilov понял. А чтобы в противоположную сторону был поворот?

[@a-1dogg144]

Ьог есть! спасибо большое

[@Fyhbc1ty]

сделала 6 аккардеонов, но одна первая на готовом сайте даже не отображается ((( все сделала как на видео. из этого вытекает вопрос, можно создавать неограниченнное кол-во аккардеонов? или можно только 5?

[@Елена-г3ъ6в]

такая же проблема, много раз проверяла все ли верно сделала, ошибок не нашла ( подскажите, у кого-то было так? как исправить ? именно первая раскрывашка не отображается, остальные видны

[@ГлебПопов-б7ж]

У меня на мобильной версии сайт с этим скриптом сайт долго загружается. Проверял, когда отключаю скрипт, сайт грузится нормально. На десктопе норм. Может быть в коде есть какая-то особенность, что так влияет на скорость загрузки моб версии.

[@frostfrost8530]

а можно как-то сделать что бы цвет раскрывшегося блока изменялся?

[@Buddilov]

Привет) ну просто сделай блок другого цвета, который открывается Или ты как то по-другому там хочешь?

[@VasilevaWebDesigner]

А как сделать, чтобы линия разделяющая вопросы опускалась вниз под ответ?

[@Buddilov]

Поставить ее в блок другого вопроса, тогда она будет опускаться вместе с ним

[@VasilevaWebDesigner]

@@Buddilov да, я так уже и сделала, спасибо

[@infarkt4717]

А как сделать чтоб по клику по заголовку у меня данный заголовок окрашивался в другой цвет? Не понимаю как к нему обратиться, уже перепробовал столько вариантов)

[@Елизавета-р5ю5п]

подскажите, может быть, узнали, как?)

[@infarkt4717]

@@Елизавета-р5ю5п к сожалению нет:(

[@АннаШмаль-г2и]

а возможно ли как-то сделать раскрывающееся меню только в мобильной версии? в декстопной у меня оно полноценным списком

[@Buddilov]

Конечно, дублируй блок и ограничь зону видимости

[@ТимофейМахотин]

Да, есть вопрос! Что вы думаете о философской концепции Иммануила Канта?

[@Buddilov]

Философия Иммануила Канта - это идеи о том, как мы познаем мир и что такое мораль. Он говорил, что наше понимание мира формируется не только нашими чувствами и опытом, но и нашими врожденными способностями. Кроме того, Кант выделял категории мышления, такие как пространство и время, как основные структуры, через которые мы воспринимаем мир. В области морали Кант разработал концепцию категорического императива, который гласит, что мы должны поступать только так, чтобы наши действия могли стать общим законом для всех людей. Это означает, что моральные нормы должны быть универсальными и обязательными для всех, независимо от обстоятельств. В целом, философия Канта представляет собой глубокий анализ человеческого разума, познания и морали, который оказал значительное влияние на развитие философии и мышления в целом Пойдёт ответ? 😁

[@ТимофейМахотин]

@@Buddilov Хотелось бы в двух словах и покороче, но, в целом, да

[@Buddilov]

@@ТимофейМахотин Тогда так) Философия Иммануила Канта обращается к вопросам о том, как мы познаем мир через наши собственные категории мышления и формирует моральные принципы, основанные на универсальной обязательности и нравственной целостности

[@ТимофейМахотин]

​@@Buddilov Вот, теперь идеально

[@AviLanis]

Этому видео год, но вдруг автор заметить и подскажет🙏Можно ли как-то настроить анимацию "кнопки", чтобы она проворачивалась не на 180° а на 45 допустим?

[@Buddilov]

В коде есть строчка для этого .active-accord .accord-icon { transform: rotate(180deg)} Меняй число 180 на любое другое

[@Alena_Tam]

А есть варианты, почему может не работать? 😔 все пере проверила, делаю как в видео, но видно все блоки сразу , ничего не скрывается и не двигается

[@Alena_Tam]

Нашла уже ответ в комментах про разрешение в настройках iQuery. Заработало, однако первая вкладка остается открытой и отказывается подчиняться 😔

[@Alena_Tam]

Господи, я его сделала! НАКОНЕЦ-ТО!!!! Сама с собой пообщалась, сама поотвечала 😅 просто в одном месте дефис потерялся 😬😬😬 Спасибо большое за такую понятную подробную инструкцию! Вы бы видели какая красота получилась ❤️‍🔥🤍

[@ofitserov_ma]

Это то есть если на лендинга две гармошки то они будут работать с этим кодом?просто букву поменять?

[@Buddilov]

Да)

[@mynameistemaa]

@@Buddilov не работает так. поменял буквы, поменял цифры. не дает(((

[@Dogivill]

Здравствуйте! Подскажите как возможно сделать аккордеон в аккордеоне?

[@Buddilov]

Нет

[@iblancos7]

@@Buddilov Что значит нет? Можно конечно. Не вводите людей в заблуждение. Главное, это создать массив и добавить в него значение высоты каждого .content в аккордеоне. Соответственно, кнопке вашем класс "collapsible", контенту "content". У меня работает. var coll = document.getElementsByClassName("collapsible"); var i; let heightArray = []; for (let i = 0; i < coll.length; i++) { // добавляем значения высоты каждого .content в массив по порядку heightArray.push(coll[i].nextElementSibling.scrollHeight); } for (let i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); if (!this.classList.contains('active')) { // при закрытии какой-либо кнопки закрывается также все внутренние кнопки и контент for (let x = i + 1; x < coll.length; x++) { coll[x].classList.remove("active"); coll[x].nextElementSibling.style.maxHeight = null; } } var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; for (let prevContent = 0; prevContent < i; prevContent++) { // при открытии какой-либо кнопки нам необходимо также менять высоту всех предыдущих .content для корректного отображения аккордеона, высчитываем новую высоту путем сложения предыдущих значений высоты let sumHeight = 0; for (let prevContent = 0; prevContent

[@infarkt4717]

@@iblancos7 А как заголовок, на который я кликаю покрасить? Как к нему обратиться, чтобы в стилях цвет поменять

[@НадеждаНовикова-ъ9ю]

А можно ли такое сделать в бесплатной версии?

[@Buddilov]

Нет

[@ЮлияМальцева-й1м]

Все бы ничего, но у меня первая вкладка аккордеона не хочет работать. А после того, как переключаешься на новую вкладку, то первая вообще исчезает

[@perkovaperkova]

Код почему-то конфликтует с кастомным курсором и не работает, были ли у кого-то такие проблемы?

[@natalietalas]

А как сделать чтобы кнопка переключалась?

[@Buddilov]

Посмотри другие видео на канале про аккордеон

[@kristina934]

Делала всё шаг за шагом, но у меня сразу все все вкладки открыты и заголовки и карточки( Подскажите пожалуйста, в чём может быть проблема?

[@АртёмА-д9в8т]

Такая же история, хотя раньше код работал

[@Alena_Tam]

@@АртёмА-д9в8тне знаю актуально ли вам ещё, но там выше ответили, что надо в настройках разрешить iQuery, во вкладке «ещё». У меня после этого заработало

[@tanyar.3325]

Эх, у меня не срабатывает. Не понимаю почему. Имена классов на месте. Все как в видео, но, увы

[@mozgovorot7334]

А есть варик вообще в одном блоке это всё сделать?

[@Buddilov]

Нет

[@mozgovorot7334]

@@Buddilov всё, разобрался! Спасибо за инфу. Но было бы не лишним, объяснить дополнительно, как натянуть в итоге сову на глобус)

[@АртёмА-д9в8т]

Почему-то не работает код после обновления, ещё недавно работал, а сейчас просто всё открыто по умолчанию единым полотном

[@АртёмА-д9в8т]

UPD Видимо это из-за того, что они ввели собственные библиотечные блоки аккордеона

[@Buddilov]

@@АртёмА-д9в8т дело может быть в выключеном jQuery, в Настройках сайта во вкладке "Еще"

[@АртёмА-д9в8т]

@@Buddilov спасибо за ответ, на будущее учту! Пришлось оперативно на библиотечный аккордеон сверстать, так как на сайт трафик крутится и нужно, чтобы всё выглядело опрятно 24/7

[@Buddilov]

@@АртёмА-д9в8т Понимаю) Сейчас много где послетали скрипты. Попробуй на будущее, скорей всего поможет

[@Alena_Tam]

@@Buddilovспасибо! Действительно эта галочка помогла ❤️‍🔥 Только первая вкладка осталась открытой и не скрывается. Можете подсказать в чем может быть дело? 👀

[@ansarbajaly5892]

Здравствуйте! Этот код хороший , только не функционирует на мобильной версии.

[@makhnovskaia]

у меня всё норм

[@daria_stroganova_]

А через неделю пришлось удалить :(( с мобильного сайт с этим аккордеоном вообще перестал открываться, с десктопов - через раз. может, это можно было как-то легко пофиксить, но я, к сожалению, не знаю как. Пришлось заменить на стандартный. По крайней мере, пока

[@dannyflowers6624]

привет! код работал ночью все было ок, а утром уже все блоки просто по порядку, кто то решил эту проблему?

[@Buddilov]

Привет) Попробуй его сделать на другой странице, бывает такое Или возьми другой способ на канале