Как сделать аккордеон на: чистом CSS / прекрасном JS / ужасном jQuery?

  Переглядів 31,804

Просто: разработка

Просто: разработка

День тому

В этом видео вы увидите 3! способа реализации Аккордеонов.
Я покажу как сделать аккордеон на CSS, потом будет на jQuery (с несколькими вариантами написания логики), и в завершении - JavaScript.
=======================================
Содержание:
00:00 Введение
00:30 Аккордеон на HTML + CSS
06:33 Аккордеон на jQuery
11:52 Аккордеон на JavaScript

КОМЕНТАРІ: 100
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/
@user-cu7qx2bv8c
@user-cu7qx2bv8c 4 дні тому
Господи! Добрый Юноша! Я только это всё изучаю, зарабатывать, даже не пыталась, но если не получается решить ту или иную задачу, у меня останавливается МИР ! Милый, Виталий, Вы возвращаете меня к жизни! Иногда для решения мне не хватает какой-нибудь мелочи, а вы всё наглядно объясняете ! ! ! Спасибо Вам ОГРОМНОЕ ! ! !
@delalen8012
@delalen8012 3 роки тому
Сегодня я узнал не только три способа, как сделать аккордеон, но и что такое аккордеон! Спасибо))
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Хаха -))
@DjekasUzumaki
@DjekasUzumaki 3 роки тому
Пришел я значит из музыкальной школы, подумал прекрасный мужчина из народного ансамбля расскажет как сделать аккордеон в домашних условиях, а тут мне про эти ваши интернеты рассказывает, но лайк все равно поставлю!)
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо -))
@aikkku
@aikkku 3 роки тому
😂😂😂интересный случай
@aikkku
@aikkku 3 роки тому
Так круто! Спасибо) Видосы интересные, как всегда❤️
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо -)
@okireev
@okireev 3 роки тому
Отличные последние три видео. Всё подробно объясняете и мне очень нравятся видео про реализации базовых вещей на нативном js. 👍
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо
@user-bi3kx5uf6d
@user-bi3kx5uf6d 3 роки тому
Спасибо мужик тебе за твои видео. Всё по бэму расписал и аккуратно так лайк
@user-ff3lc1et3u
@user-ff3lc1et3u 3 роки тому
Спасибо Виталий за пользу, которую вы несёте людям на этом канале.
@Polihut1
@Polihut1 3 роки тому
Как обычно мега лайкосик за супер важную инфу и за то что очень в кассу 👍🏻😉
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Рад)
@sanjarkhannasibli6236
@sanjarkhannasibli6236 3 роки тому
Здравствуйте. Сам из Баку. Сейчас изучаю JavaScript, HTML5 и CSS3, ваши уроки помогают в этом, очень полезные, спасибо! Очень приятно, как простой парень из Баку поднялся до таких высот, как IBM. Удачи вам!
@jurgena.2160
@jurgena.2160 3 роки тому
благодарность за видео) когда не часть делаешь аккордеон то местами забываешь, что да как) удачи
@alexbugg2167
@alexbugg2167 3 роки тому
Спасибо огромное , давно ждал)красавчик🤘
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Вот и дождался -)
@alexbugg2167
@alexbugg2167 3 роки тому
Просто: разработка только вот вопрос, а как сделать его плавным выезжающим ?Буду благодарен за подсказку
@masterng56
@masterng56 2 роки тому
Реально очень просто и полезно! Хорошо бы еще анимацию на раскрытие и закрытие аккордеона.
@elenaizmaylova9331
@elenaizmaylova9331 2 роки тому
Спасибо огромное за видео!
@Redracer228
@Redracer228 3 роки тому
Ты гений! Спасибо, помог с проектом!
@dennymaverick5472
@dennymaverick5472 2 роки тому
Спасибо большое! Очень полезно!! 🧡
@MelkoR4111
@MelkoR4111 2 роки тому
как же вы круто объясняете, вот бы у вас был курс по js
@user-zj4qw3kg8f
@user-zj4qw3kg8f 3 роки тому
Большое тебе спасибо, учусь верстать по твоему каналу)
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Рад слышать)
@user-ib1cg3py6z
@user-ib1cg3py6z 3 роки тому
Сделал как в видео - ничего не получилось. Странно
@user-jd4vj2eg6m
@user-jd4vj2eg6m 3 роки тому
Все просто и понятно....респект тебе Чувак
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо
@akbarshoh9661
@akbarshoh9661 3 роки тому
Кому как но мне нравиться как он объясняет и то что надо для новичков. Чтобы больше таких видосы
@oleksiivovnenko4661
@oleksiivovnenko4661 3 роки тому
Очень полезно, спасибо.
@user-ip9nu6up9q
@user-ip9nu6up9q 3 роки тому
Виталий, спааасибо большое
@aleksandrkozowski9717
@aleksandrkozowski9717 Рік тому
Полезное видео. Теперь знаю, как сделать каркас, осталось стилизовать по-своему)
@plaxa4094
@plaxa4094 9 місяців тому
Большое спасибо за видео, максимально всё понятно. Единственное, что хотел узнать, а как лучше аккордеон писать, часто на css или на jQury, по сути разницы же нет в функциональном моменте (или ошибаюсь))?
@user-dp8xc9tx8n
@user-dp8xc9tx8n 2 роки тому
спасибо за урок
@poring39
@poring39 3 роки тому
очень полезное видео, спасибо!
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо
@VasiliyKolpaxidis
@VasiliyKolpaxidis 2 роки тому
Спасибо большое за полезную инфу. +1 подписчик Я вас видел в ИТ бороде поэтому и посмотрел. Лексу привет ))))))))
@romanchernyshov2632
@romanchernyshov2632 Рік тому
Спасибо!
@kozlov1801
@kozlov1801 3 роки тому
Круто!
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Пасиба -)
@AlexZHIMuk
@AlexZHIMuk 3 роки тому
Весчь! Спасеба, сохранил!
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Благодарю -)
@user-xy5vm6rv5r
@user-xy5vm6rv5r 2 роки тому
Круто мне помогло!
@boldureans
@boldureans 3 роки тому
Ништяки подъехали
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Они самые -)
@arinastepanova2810
@arinastepanova2810 Рік тому
Добрый день! А в случае создания аккордеона на голом html и css можно сделать так, чтобы выпадали эти вкладки плавно/замедленно. Применяется ли transition к input radio? Если да, то подскажите пожалуйста как это сделать?🙏
@user-nr4ry1uc4l
@user-nr4ry1uc4l 3 роки тому
Спасибо)
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Не за что -)
@tbb134
@tbb134 3 роки тому
Thanks for video Bro
@dennymaverick5472
@dennymaverick5472 2 роки тому
Здравствуйте! Скажите пожалуйста, как сделать, чтобы при нажатии на триггер, он оставался на месте? Когда контента на странице достаточно много, при нажатии на открывающий список, когда аккордеон сверху находится - еще норма, но когда аккордеон снизу страницы, - контент смещается вверх, и неудобно прокручивать к началу... Буду благодарен за Ваш ответ! ❤️❤️❤️
@user-kz7pp7rm6m
@user-kz7pp7rm6m 2 роки тому
Огонь, почему у тебя курса нет своего тока?))
@priminister5711
@priminister5711 2 роки тому
Блин, я вот думал как сделать аккардион, везде просто было косо, где-то криво, или непонятно, вас посмотрел как вы на html scss, сделали просто ахренел, честно.
@Blade_Ruiner
@Blade_Ruiner 2 роки тому
Спасибо. Но как все же оптимальнее? В чистом html или в js делать подобные вещи? (не только про аккордеон)
@stormbraker637
@stormbraker637 Рік тому
Css менее требовательный к цп, особенно на бюджетных телефонах
@luchiksolnca6039
@luchiksolnca6039 Рік тому
Захожу на твой канал перед походом в магазин за рубашками)
@dmitriyv5740
@dmitriyv5740 7 місяців тому
Для аккордеона есть специальные хтмл теги. Это еще один простой способ.
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
А какой Ваш аккордеон?)
@shifronim8950
@shifronim8950 3 роки тому
А наш аккордеон порвался на свадьбе. Дежурная шутка юмора
@HaveFun77777
@HaveFun77777 3 роки тому
а как сделать, что бы он плавно переключался на jquery при варианте с открытым одним боксом?
@trampsport
@trampsport 3 роки тому
Виталий, вы можете примеры на код пен сохранять?
@klitorchuk_3478
@klitorchuk_3478 3 роки тому
Очень хотелось бы увидеть от вас уроки по Vue js )
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Скорее всего не дождётесь)) я из секты любителей Реакта)
@je_mappelle_serge
@je_mappelle_serge 3 роки тому
Круто, а как на чистом js сделать плавное выдвижение контента?
@MrAbad202
@MrAbad202 2 роки тому
Придумал, как: берем контейнер, задаем ему высоту, допустим 100vh, внутри контейнера создаем враппер, задаем ему position: relative, height: 100%, и transition: height 500ms ease. Внутри враппера создаем див с контентом, ему задаем position: absolute, height: 100%, top: 0px, left: 0px. Потом создаем класс, который мы будем накладывать на враппер, через JS, который будет обозначать скрытый аккордеон, и ему задаем height: 0%
@user-ed7xc6ee7z
@user-ed7xc6ee7z 3 роки тому
Я начинающий, но если только html css, не прощу ли использовать
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
замучаетесь стилизовать
@tonit2237
@tonit2237 3 роки тому
Лысый, как обычно, решает) Лайк) В Киев не будете приезжать с конференцией по вебу? Я б сходил)
@vladgur4931
@vladgur4931 3 роки тому
можно реализовать аккордеон на css3 следующей структуры: Часть I 1. Название страницы 2. Название страницы 3. Название страницы Глава 1 4. Название страницы 5. Название страницы 6. Название страницы Глава 2 7. Название страницы 8. Название страницы 9. Название страницы Часть II 10. Название страницы 11. Название страницы
@user-fv9jj6xx8w
@user-fv9jj6xx8w 3 роки тому
Как добавить плавности скрипту на чистом JS?
@priminister5711
@priminister5711 2 роки тому
для классна сделай transition и для элемента
@KillerLewis73
@KillerLewis73 3 роки тому
Полностью повторил у себя ваш код на jQuery, но ничего не работает, не могу понять, почему
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Если догадаетесь прийти в тг чат с кодом, вам помогут.
@user-ho3np1ry3y
@user-ho3np1ry3y 3 роки тому
Мой аккардеон на jquery в 2 строки)
@TheKirk1989
@TheKirk1989 3 роки тому
Из всего выше перечисленного я с мог реализовать только подключение библиотеки JQuery
@andrewivan5423
@andrewivan5423 3 роки тому
Уходите от jQuery его время прошло
@dasvas9383
@dasvas9383 3 роки тому
ты забыл прописать cursor: pointer для дива по которому надо кликать - в сафари это работать не будет
@strelok6903
@strelok6903 3 роки тому
А что это[~]значит?? Для чего нужен ?
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
ukposts.info/have/v-deo/pHh6ZaxrgoKTk30.html
@user-rj6ez1mx6q
@user-rj6ez1mx6q 3 роки тому
Почему используешь scss а не sass?
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Потому что сасс... как бы это сказать... в общем, не могу подобрать цензурные слова, которые могут описать мои чувства по отношению к сасс -)
@user-rj6ez1mx6q
@user-rj6ez1mx6q 3 роки тому
@@prosto_razrabotka он же проще, нет точек с запятой, скобок, меньше возможности ошибится, откуда такое отношение?
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Вот именно из-за отсутствия всего вышеперечисленного возможность ошибиться куда БОЛЬШЕ!
@Sports-bo9lc
@Sports-bo9lc Рік тому
Надеюсь автор читает коменты. Как сделать плавное появление?
@vance8459
@vance8459 3 роки тому
От разработки не только на голове облысел, но и на бороде и бровях
@user-di4zt3br5m
@user-di4zt3br5m 3 роки тому
+
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
=
@azarmi6065
@azarmi6065 3 роки тому
Привет
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Хай
@mykolachornyi6773
@mykolachornyi6773 3 роки тому
Нужен аккордеон в аккордеоне)
@user-hc5ul3ds5u
@user-hc5ul3ds5u 3 роки тому
Lukas
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Likas -)
@user-sw7tu8bu5t
@user-sw7tu8bu5t Рік тому
Казалось бы - логично объяснить в чем особенность, если пишешь двухуровневый аккордеон, но нет...
@l3xxxy
@l3xxxy 3 роки тому
Jquery , серьезно ? В 2020 году?
@griwopr6015
@griwopr6015 3 роки тому
и что?
@user-zq4nz6yd2p
@user-zq4nz6yd2p Рік тому
@@griwopr6015 и в 22 году более 90% сайтов работает на нём
@horlonangel
@horlonangel 3 роки тому
Что тут крутого? Это же язык оформления. Навыдумывали всякого говна. Это как к молотку приделать микроскоп и кричать: смотрите! Я при помощи молотка рассматриваю микробов... Тфу бл*, аж тошнит.
Как сделать табы на: чистом CSS / чистом JS / грязном jQuery?
26:33
Просто: разработка
Переглядів 25 тис.
Верстка звездатого рейтинга
8:36
Просто: разработка
Переглядів 14 тис.
LIVE - Парад Победы в Москве. 9 Мая 2024
2:27:56
AKIpress news
Переглядів 2,2 млн
Glow Stick Secret 😱 #shorts
00:37
Mr DegrEE
Переглядів 117 млн
Полноэкранный (fullscreen) блок  на CSS и HTML // Как это сделать?
16:06
How To Make Toggle Button Using HTML & CSS
5:27
MakeTechStuff
Переглядів 60 тис.
Как сделать слайдер на JS?
27:37
Просто: разработка
Переглядів 89 тис.
JS-решения №20. Создаем свой плагин для аккордеона
15:47
MaxGraph - cайты как страсть
Переглядів 4,1 тис.
Как создать Аккордеон Компонент в React JS за 7 минут
7:28
Типичный Веб Разработчик
Переглядів 3,1 тис.
Аккордеон на чистом HTML, CSS без Javascript!
13:07
Как сделать видеофон на сайте?
5:58
Просто: разработка
Переглядів 13 тис.
LIVE - Парад Победы в Москве. 9 Мая 2024
2:27:56
AKIpress news
Переглядів 2,2 млн