Спойлер на HTML CSS и jQuery + анимация стрелки // Как это сделать?
HTML-код
- Опубликовано: 27 ноя 2019
- В этом выпуске "Как это сделать?" Покажу как сделать классные спойлеры на HTML CSS и jQuery а так же создадим и анимируем стрелку.
Архив с результатом верстки доступен для подписчиков на патреоне:
/ materialy-na-css-31915903
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Ценю твой ЛАЙК и КОММЕНТ!
Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
Привет, что ты используешь для авто обновления localhost?
Вот эту програмку
ruclips.net/video/BqO5Pj26om8/видео.html
Привет. У тебя отличные видео по CSS (я уже писал где-то), но блин от твоего JS у меня ректальная боль. Поэтому в качестве конструктивной критики + ты же учишь начинающих, как минимум 2 момента:
1) $('selector') - каждый раз когда ты так пишешь идет обход ДОМ, это дорого. Т.е. или кешируй селекторв переменную типа let/var/const myVar = $('selector') или ссылайся на this внутри колбэка (речь об ивент хендлерах).
2) Навешивание ивентов на каждый тайтл - дорого (плохо). $('.box').on('click', '.box__title', function() { }) - делегирование, позволит ловить все клики по детям на родительском контейнере.
Может показаться что я придираюсь, но блин поверь на слово, это боль из жизни. Когда этого добра чуть больше 3-х штук, а "синьор дивилопер" пишет вот так... а все это висит и тормозит и тебе надо доказать всем почему это плохо.... короче, надеюсь иы поймешь)
Если у кого то при точном соблюдении инструкций из видео и правильности написания кода не работает спойлер, попробуйте подключить библиотеку jQuery Core 3.6.0 - uncompressed, с той же версией но slim minified у меня не работало. Если верить просторам интернета то дело в селекторе "Next( )"
P.s Урок отличный, спасибо.
Как всегда, просто и доступно, то есть- гениально. Спасибо, ты лучший
Спасибо большое! 😊
Как всегда полезно, без лишней воды, спасибо за урок. Однозначно Лайк
Жека, смотрю тебя уже давно, но комментарий оставляю только сейчас) Твой курс очень помогает, очень классные ролики. Видео очень классные, по наполненности, информативности, просто супер, с твоих видео можно отлично вырасти. Ты очень добрый и хороший человек, приятно слушать, понятно излагаешь материал. Эти наработки можно использовать во всех своих работах, это очень здорово, что с твоей помощью, посмотрев видео, сразу облегчаешь себе жизнь, заготовка уже готова и всегда под рукой)
магия, не иначе)))
Спасибо за полезный урок!)
Надеюсь таких еще будет много)
Просто и доступно)))) И самое главное никакой воды!!!
спасибо Вам огромное за Ваши ролики))))
Пожалуйста! Рад что полезно!
Классный урок. Рассказано легко для восприятия - все просто (когда понимаешь). Спасибо!
Спасибо за урок. Лайк, комментарий в качестве минимальной благодарности за твой труд.
Четко, красиво и понятно. Спасибо огромное. :)
Как всегда, просто и доступно. Спасибо.
Величезне "ДЯКУЮ" за Чудовий Урок...Удачі Вам і Всього Найкращого
Круто, очень красивая фишка! И даже jQuery понемногу становится понятным. Большое спасибо!
Для этого и делаю. Потом на уроках будет легче)
Супер! В миллионый раз выражаю благодарность!)))
Пожалуйста! 🤘👍
Круто и очень просто. Спасибо за труды в области просветления масс!!!
Пожалуйста! 👍
Огроооооооммнооооееее спасибо , уже второй день ищу как это сделать
уже кст потихоньку втягиваюсь в jq
Тебе как обычно респект и благодарочка нереальная
Урок очень полезный. Просто и доступною.Супер!!!
Супер! Я рад!
Як завжди все доступно пояснив і з прикладами )) дякую
на дворе ноябрь 2023, а это видео меня всегда выручает, как заказы по спойлерам делаю
Хороший способ спасибо что делайте ролики такого типа успехов вам))
Спасибо! Их будет очень много!
Отличный урок, спасибо Жека!
Просто супер! Только что переделала данный пример js для меню с активной ссылкой!) Спасибо за ваш труд)))
Спасибо, рад что полезно!
Огонь, Женя! Отдельное спасибо за JS, очень доступно объясняешь! )
Пожалуйста! По JS будут подробные уроки
@@FreelancerLifeStyle Спасибо! Очень жду)
Большое спасибо вам за ролики. Все они отличные!
Очень полезный урок, спасибо!
Спасибо за видео, как всегда всё очень доступно! Супер! :)
Пожалуйста!
Очень полезный урок!
Благодарю :)
Пожалуйста!
Просто и гениально. Спасибо
Ви пояснюєте все настільки зрозуміло, що начебто завжди знав цю інформацію, ДЯКУЮ!
Всё просто и понятно! 👍
Супер, спасибо!
Чоловіче, сильно мене рятуєш)
Велике спасибі!
Спасибо за труд, очень ясно все объяснили.
Спасибо! Все доступно и понятно! Лайк!
Спасибо!
изучаю с нуля, очень круто что ты все объясняешь, буду пробовать делать, спасибо огромное!
Супер, я рад!
Спасибо, лайк не глядя, удивил как всегда!)
Спасибо! 👍🤘
Чётко так и со знанием дела. Респектище!
Спасибо!
Спасибо весёлый чувак, ты лучший
Супер! быстро и доступно!
Супер) всё просто и понятно
Просто и понятно, спасибо!
це магія, Євгене! я початківець і в мене все вийшло!
дякую❤
Большое человеческое спасибо!
Спасибо!! Урок супер-полезный
Я рад!
Гений, спасибо за видео✨
Жека, большое спасибо, чему я только не научился уже по твоим видео!
Божечки это мой первый скрипт и он работает!!! Огромнейшее спасибо, сенсей!!!
Пожалуйста!
Спасибо.Крутяково!
Крутяк, спасибо! :)
Спасибо! Очень полезен =) Лайк
Пожалуйста!
Благодарю!
Гениально))) все четко понятно и просто спасяб! Эх надо жс учить...
Спасибо! Все будет в рамках курса)
Супер! Спасибо!
Благодарю!!!
Спасибо тебе, добрый человек. Сейчас буду играть со спойлерами.
Пожалуйста!
Ты лучший! Спасибо!
Отличная заготовка для новичка! Спасибо!
Пожалуйста! 👍
Спасибо 🤝
Спасибо за урок!
Как всегда годно!!!
Спасибо!
И спасибо за возможность обучаться у ТАКОГО педагога)))
Спасибо! Теперь я знаю, как это сделать! =)
Я рад!
Теперь я точно знаю, как сделать аккордеон правильно) 👍
👍👍👍Крутяк!
Как же ты хорош, посмотрел в вк, и специально зашел на ютуб чтоб лайк проставить)
Спасибо большое!
Спасибо!!!
Супер!!!
Спасибо!
Спасибо, очень пригодилось! Вопрос, который давно не могу понять: когда лучше использовать анимацию через JS (slideToggle), а когда через CSS (transform, transition)? В вашем примере можно было сделать выпадение блока через добавление свойств CSS, как понять, где каким методом пользоваться?
Добрый день!
Подскажите, Вы в этом уроке для рисования стрелок применили псевдоэлементы. Это сделано для обучения или это реальная практика? Не проще было бы применить простые картинки?
Круто! Спасибо :)
Пожалуйста!
Круто!спасибо !!!
Просто лучший!
Отлично, спасибо
При обучении всегда возникает проблема подачи автором.
У этого автора подача материала лучшая.
Классное видео!!!
Спасибо!
Еще какой полезный! Берем в разработку! 👍
Спасибо! Я рад!
Прикольно!)))Дякую!
Будь ласка!
Четко!)
Спасибо!
Привет! Спасибо за отличные уроки. В данном случае ".accordion" уместнее чем ".one".
Спасибо тебе за очередной годный урок! Не обращай внимание на "дизлайки". Помни, что у тебя есть сотни приверженцев, которым классно заходит твой материал. Такие же начинающие, как и я, которые многое выучили, но только учатся использовать на практике. И вот такие уроки учат создавать крутые штуки простыми методами! Ещё раз спасибо и держи хвост пистолетом!
Спасибо большое! 🤘👍
Большое спасибо
Пожалуйста!
Годнота!
Сколько изучаю вёрстку, ежедневно почти встречаю новые слова, теперь я знаю что такое спойлер, спасибо Евгений за то что нас обучаете новому))))...
Пожалуйста! 👍
@@FreelancerLifeStyle Спойлер и аккордеон)
Класс!
Лучший !
Спасибо!
Лучший !!!
спасибо=)
побільше роликів!!!)))
просто топ)))
я тіьки почав вчити і таких коротких та інформативних відео немає))
Добре! Дякую!
Сначала лайк, потом просмотр
Спасибо!
спасибо
Красава!!!
Жека лучший
Спасибо!
Чикаю ще щось таке круте!!!
какими плагины ты пользуешься?
spasibooo bolshoe
А что нужно сделать, что-бы один из табов был открыт изначально (т.е при загрузке)? .active не работает в этом случае... Благодарю за все ваши ведео-уроки!
👍👍👍СУПЕР!!
Жень помоги пожалуйста! почему когда я захожу в консоль джава скрипта, выходит ошибка Uncaught ReferenceError: $ is not defined, хотя сделал все как на видео, помоги пожалуйста!
Это все супер) В будущем 100% пригодится, а я уже буду знать как это сделать) Давай теперь уроки пилить, а то дисбаланс получается)
Спасибо! Уроки готовяться.
ты крут!
Спасибо!
Расскажи пжл как ты так лихо переносишь все классы в css?
Спасибо большое за урок!!! Очень прощу прям умоляю можете показать как спойлер отображать сбоку? Пожалуйста!??