Как сделать аккордеон на: чистом CSS / прекрасном JS / ужасном jQuery?
Рет қаралды 31,909
Күн бұрынВ этом видео вы увидите 3! способа реализации Аккордеонов.
Я покажу как сделать аккордеон на CSS, потом будет на jQuery (с несколькими вариантами написания логики), и в завершении - JavaScript.
=======================================
Содержание:
00:00 Введение
00:30 Аккордеон на HTML + CSS
06:33 Аккордеон на jQuery
11:52 Аккордеон на JavaScript
@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 29 күн бұрын
Господи! Добрый Юноша! Я только это всё изучаю, зарабатывать, даже не пыталась, но если не получается решить ту или иную задачу, у меня останавливается МИР ! Милый, Виталий, Вы возвращаете меня к жизни! Иногда для решения мне не хватает какой-нибудь мелочи, а вы всё наглядно объясняете ! ! ! Спасибо Вам ОГРОМНОЕ ! ! !
@DjekasUzumaki 4 жыл бұрын
Пришел я значит из музыкальной школы, подумал прекрасный мужчина из народного ансамбля расскажет как сделать аккордеон в домашних условиях, а тут мне про эти ваши интернеты рассказывает, но лайк все равно поставлю!)
@prosto_razrabotka 4 жыл бұрын
Спасибо -))
@aikkku 4 жыл бұрын
😂😂😂интересный случай
@aikkku 4 жыл бұрын
Так круто! Спасибо) Видосы интересные, как всегда❤️
@prosto_razrabotka 4 жыл бұрын
Спасибо -)
@okireev 4 жыл бұрын
Отличные последние три видео. Всё подробно объясняете и мне очень нравятся видео про реализации базовых вещей на нативном js. 👍
@prosto_razrabotka 4 жыл бұрын
Спасибо
@Polihut1 4 жыл бұрын
Как обычно мега лайкосик за супер важную инфу и за то что очень в кассу 👍🏻😉
@prosto_razrabotka 4 жыл бұрын
Рад)
@user-ff3lc1et3u 3 жыл бұрын
Спасибо Виталий за пользу, которую вы несёте людям на этом канале.
@delalen8012 4 жыл бұрын
Сегодня я узнал не только три способа, как сделать аккордеон, но и что такое аккордеон! Спасибо))
@prosto_razrabotka 4 жыл бұрын
Хаха -))
@user-bi3kx5uf6d 4 жыл бұрын
Спасибо мужик тебе за твои видео. Всё по бэму расписал и аккуратно так лайк
@alexbugg2167 4 жыл бұрын
Спасибо огромное , давно ждал)красавчик🤘
@prosto_razrabotka 4 жыл бұрын
Вот и дождался -)
@alexbugg2167 4 жыл бұрын
Просто: разработка только вот вопрос, а как сделать его плавным выезжающим ?Буду благодарен за подсказку
@sanjarkhannasibli6236 4 жыл бұрын
Здравствуйте. Сам из Баку. Сейчас изучаю JavaScript, HTML5 и CSS3, ваши уроки помогают в этом, очень полезные, спасибо! Очень приятно, как простой парень из Баку поднялся до таких высот, как IBM. Удачи вам!
@masterng56 2 жыл бұрын
Реально очень просто и полезно! Хорошо бы еще анимацию на раскрытие и закрытие аккордеона.
@jurgena.2160 3 жыл бұрын
благодарность за видео) когда не часть делаешь аккордеон то местами забываешь, что да как) удачи
@user-zj4qw3kg8f 4 жыл бұрын
Большое тебе спасибо, учусь верстать по твоему каналу)
@prosto_razrabotka 4 жыл бұрын
Рад слышать)
@aleksandrkozowski9717 Жыл бұрын
Полезное видео. Теперь знаю, как сделать каркас, осталось стилизовать по-своему)
@Redracer228 3 жыл бұрын
Ты гений! Спасибо, помог с проектом!
@dennymaverick5472 2 жыл бұрын
Спасибо большое! Очень полезно!! 🧡
@akbarshoh9661 3 жыл бұрын
Кому как но мне нравиться как он объясняет и то что надо для новичков. Чтобы больше таких видосы
@user-jd4vj2eg6m 4 жыл бұрын
Все просто и понятно....респект тебе Чувак
@prosto_razrabotka 4 жыл бұрын
Спасибо
@MelkoR4111 2 жыл бұрын
как же вы круто объясняете, вот бы у вас был курс по js
@elenaizmaylova9331 2 жыл бұрын
Спасибо огромное за видео!
@VasiliyKolpaxidis 2 жыл бұрын
Спасибо большое за полезную инфу. +1 подписчик Я вас видел в ИТ бороде поэтому и посмотрел. Лексу привет ))))))))
@oleksiivovnenko4661 3 жыл бұрын
Очень полезно, спасибо.
@user-dp8xc9tx8n 2 жыл бұрын
спасибо за урок
@user-ip9nu6up9q 3 жыл бұрын
Виталий, спааасибо большое
@poring39 4 жыл бұрын
очень полезное видео, спасибо!
@prosto_razrabotka 4 жыл бұрын
Спасибо
@user-ib1cg3py6z 3 жыл бұрын
Сделал как в видео - ничего не получилось. Странно
@kozlov1801 4 жыл бұрын
Круто!
@prosto_razrabotka 4 жыл бұрын
Пасиба -)
@AlexZHIMuk 4 жыл бұрын
Весчь! Спасеба, сохранил!
@prosto_razrabotka 4 жыл бұрын
Благодарю -)
@user-xy5vm6rv5r 2 жыл бұрын
Круто мне помогло!
@boldureans 4 жыл бұрын
Ништяки подъехали
@prosto_razrabotka 4 жыл бұрын
Они самые -)
@romanchernyshov2632 Жыл бұрын
Спасибо!
@plaxa4094 9 ай бұрын
Большое спасибо за видео, максимально всё понятно. Единственное, что хотел узнать, а как лучше аккордеон писать, часто на css или на jQury, по сути разницы же нет в функциональном моменте (или ошибаюсь))?
@user-nr4ry1uc4l 3 жыл бұрын
Спасибо)
@prosto_razrabotka 3 жыл бұрын
Не за что -)
@tbb134 3 жыл бұрын
Thanks for video Bro
@arinastepanova2810 Жыл бұрын
Добрый день! А в случае создания аккордеона на голом html и css можно сделать так, чтобы выпадали эти вкладки плавно/замедленно. Применяется ли transition к input radio? Если да, то подскажите пожалуйста как это сделать?🙏
@priminister5711 2 жыл бұрын
Блин, я вот думал как сделать аккардион, везде просто было косо, где-то криво, или непонятно, вас посмотрел как вы на html scss, сделали просто ахренел, честно.
@tonit2237 4 жыл бұрын
Лысый, как обычно, решает) Лайк) В Киев не будете приезжать с конференцией по вебу? Я б сходил)
@dennymaverick5472 2 жыл бұрын
Здравствуйте! Скажите пожалуйста, как сделать, чтобы при нажатии на триггер, он оставался на месте? Когда контента на странице достаточно много, при нажатии на открывающий список, когда аккордеон сверху находится - еще норма, но когда аккордеон снизу страницы, - контент смещается вверх, и неудобно прокручивать к началу... Буду благодарен за Ваш ответ! ❤️❤️❤️
@user-kz7pp7rm6m 2 жыл бұрын
Огонь, почему у тебя курса нет своего тока?))
@luchiksolnca6039 Жыл бұрын
Захожу на твой канал перед походом в магазин за рубашками)
@klitorchuk_3478 4 жыл бұрын
Очень хотелось бы увидеть от вас уроки по Vue js )
@prosto_razrabotka 4 жыл бұрын
Скорее всего не дождётесь)) я из секты любителей Реакта)
@Blade_Ruiner 2 жыл бұрын
Спасибо. Но как все же оптимальнее? В чистом html или в js делать подобные вещи? (не только про аккордеон)
@stormbraker637 Жыл бұрын
Css менее требовательный к цп, особенно на бюджетных телефонах
@je_mappelle_serge 3 жыл бұрын
Круто, а как на чистом js сделать плавное выдвижение контента?
@MrAbad202 2 жыл бұрын
Придумал, как: берем контейнер, задаем ему высоту, допустим 100vh, внутри контейнера создаем враппер, задаем ему position: relative, height: 100%, и transition: height 500ms ease. Внутри враппера создаем див с контентом, ему задаем position: absolute, height: 100%, top: 0px, left: 0px. Потом создаем класс, который мы будем накладывать на враппер, через JS, который будет обозначать скрытый аккордеон, и ему задаем height: 0%
@prosto_razrabotka 4 жыл бұрын
А какой Ваш аккордеон?)
@shifronim8950 4 жыл бұрын
А наш аккордеон порвался на свадьбе. Дежурная шутка юмора
@HaveFun77777 3 жыл бұрын
а как сделать, что бы он плавно переключался на jquery при варианте с открытым одним боксом?
@trampsport 3 жыл бұрын
Виталий, вы можете примеры на код пен сохранять?
@user-ed7xc6ee7z 3 жыл бұрын
Я начинающий, но если только html css, не прощу ли использовать
@prosto_razrabotka 3 жыл бұрын
замучаетесь стилизовать
@user-fv9jj6xx8w 3 жыл бұрын
Как добавить плавности скрипту на чистом JS?
@priminister5711 2 жыл бұрын
для классна сделай transition и для элемента
@user-ho3np1ry3y 4 жыл бұрын
Мой аккардеон на jquery в 2 строки)
@vladgur4931 3 жыл бұрын
можно реализовать аккордеон на css3 следующей структуры: Часть I 1. Название страницы 2. Название страницы 3. Название страницы Глава 1 4. Название страницы 5. Название страницы 6. Название страницы Глава 2 7. Название страницы 8. Название страницы 9. Название страницы Часть II 10. Название страницы 11. Название страницы
@KillerLewis73 3 жыл бұрын
Полностью повторил у себя ваш код на jQuery, но ничего не работает, не могу понять, почему
@prosto_razrabotka 3 жыл бұрын
Если догадаетесь прийти в тг чат с кодом, вам помогут.
@TheKirk1989 4 жыл бұрын
Из всего выше перечисленного я с мог реализовать только подключение библиотеки JQuery
@andrewivan5423 3 жыл бұрын
Уходите от jQuery его время прошло
@dasvas9383 3 жыл бұрын
ты забыл прописать cursor: pointer для дива по которому надо кликать - в сафари это работать не будет
@dmitriyv5740 8 ай бұрын
Для аккордеона есть специальные хтмл теги. Это еще один простой способ.
@strelok6903 4 жыл бұрын
А что это[~]значит?? Для чего нужен ?
@prosto_razrabotka 4 жыл бұрын
kzfaq.info/get/bejne/oq55ZNllsLLGYn0.html
@vance8459 3 жыл бұрын
От разработки не только на голове облысел, но и на бороде и бровях
@user-rj6ez1mx6q 4 жыл бұрын
Почему используешь scss а не sass?
@prosto_razrabotka 4 жыл бұрын
Потому что сасс... как бы это сказать... в общем, не могу подобрать цензурные слова, которые могут описать мои чувства по отношению к сасс -)
@user-rj6ez1mx6q 4 жыл бұрын
@@prosto_razrabotka он же проще, нет точек с запятой, скобок, меньше возможности ошибится, откуда такое отношение?
@prosto_razrabotka 4 жыл бұрын
Вот именно из-за отсутствия всего вышеперечисленного возможность ошибиться куда БОЛЬШЕ!
@user-di4zt3br5m 4 жыл бұрын
+
@prosto_razrabotka 4 жыл бұрын
=
@Sports-bo9lc Жыл бұрын
Надеюсь автор читает коменты. Как сделать плавное появление?
@azarmi6065 4 жыл бұрын
Привет
@prosto_razrabotka 4 жыл бұрын
Хай
@mykolachornyi6773 3 жыл бұрын
Нужен аккордеон в аккордеоне)
@user-hc5ul3ds5u 4 жыл бұрын
Lukas
@prosto_razrabotka 4 жыл бұрын
Likas -)
@user-sw7tu8bu5t Жыл бұрын
Казалось бы - логично объяснить в чем особенность, если пишешь двухуровневый аккордеон, но нет...
@l3xxxy 4 жыл бұрын
Jquery , серьезно ? В 2020 году?
@griwopr6015 3 жыл бұрын
и что?
@user-zq4nz6yd2p Жыл бұрын
@@griwopr6015 и в 22 году более 90% сайтов работает на нём
@horlonangel 4 жыл бұрын
Что тут крутого? Это же язык оформления. Навыдумывали всякого говна. Это как к молотку приделать микроскоп и кричать: смотрите! Я при помощи молотка рассматриваю микробов... Тфу бл*, аж тошнит.
Фрілансер по життю
Рет қаралды 1 МЛН