Аккордеон на чистом HTML, CSS без Javascript!

Подписаться 176 тыс.

Просмотров 32 тыс.

50% 1

В этом видео сделаем так называемый "аккордеон" на чистом HTML и CSS без использования javascript!
-------------------------------------------------------------------
Мой сайт: brainscloud.ru/
Генератор треугольников: apps.eky.hk/css...
Материалы урока: files.brainscl...
-------------------------------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разрабокте - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
-------------------------------------------------------------------
Мой ВК - odimaz
Группа BC - brainsc...
Мой Instagram: / dmitryvalak

Опубликовано:

27 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 98

@BrainsCloud 4 года назад

Данное видео сделано в развлекательных целях. Данный способ не рекомендуется использовать на реальных проектах.

@dinir1000 4 года назад

почему не рекомендуется?

@Evgeny_Yurievich 3 года назад

Почему на реальных проектах лучше не использовать? Лучше перегружать проект Джава-скриптом?

@ИванПомидоров-н3н 2 года назад

@@dinir1000 Чем больше js напихаешь, тем дороже можно просить.

@linuxoidovich Год назад

@@ИванПомидоров-н3н И пользователи в i2p не захотят на этот сайт заходить

@tobeymarshal6681 8 месяцев назад

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

@pilyugin 4 года назад

top: 50%; transform: translateY(-50%); Вот это надо запомнить))

@grigoriykrotko9875 4 года назад

Спасибо за информацию, а почему бы это не упростить. По моему HTML5 сейчас понимают все браузеры. Я имею в виду: Нажми на меня Скрытый текст!

@MaxLimas 4 года назад

Сначала думал, что будет типа музыкальный инструмент, а тут это:))

@DerAleksey 4 года назад

ахха

@ohwooow1223 4 года назад

круто, спасибо!) с возвращением))

@СлаваБогузавсё-щ6д 4 года назад

монстр, что тут сказать!) кратко, логично, красиво!

@toughguy867 Год назад

Шикарный видос. Вот если бы был еще видос аккордеона с картинками (слева текст, справа картинка), то я сэкономил бы себе кучу времени)) в итоге методом утраченных нервов, кое как добился желаемого. На ру пространстве примеров мало, либо я плохо гуглил.) Спасибо за видео)

@musictime5462 10 месяцев назад

Спасибо! Просто и эффективно. Я это искал и нашел. Спасибо еще раз за информацию.

@СергейБуров-м7ж 4 года назад

Кратко, содержательно и по делу )

@sashakalin 4 года назад

Есть одна проблема в твоих видео,после них не возможно смотреть контент других менторов...Спасибо,это круто!

@pomoxa 4 года назад

Четко, логично, почти понятно (это личные тараканы), спасибо огромное!

@technic_and_programming 4 года назад

Большое спасибо за твои старании!!!

@pelmeshka-sensei 4 года назад

Наконец то. Ещё бы показал что сделать чтоб содавалось динамическое количество блоков по количеству записей

@АнтонПугачев-л7о 4 года назад

Ну так динамика не относится к текущему уроку. Копайте mySQL и циклы.

@Алексей-п9л6н 4 года назад

Эх... год назад я делал подобное на jquery, а тут такое!!! Респект!

@Зипо-ю4л Год назад

все получилось большое спасибо

@valerysemenkin6024 Год назад

Спасибо)

@max3lord911 Год назад

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

@needlegood 4 года назад

Крутой урок, спасибо огромное !

@YT-ox6yp Год назад

Спасибо большое, на практике с сайтом помогло!!!

@progerlife6690 4 года назад

Не пойму, какой клоун поставил дизлайк? Димон спасибо. Пошел практиковаться! Лайк)

@DerAleksey 4 года назад

хейтеры конкуренты...

@DerAleksey 4 года назад

За звук автоматом лайк!

@Mr.Levchik Год назад

спасибо тебе большое

@9786-e1e 4 года назад

хм. как раз смотрел твой курс по вёрстке макета мого на моменте создания аккордеона, где ты говорил о том, что без js его не сделать полноценно. ну я прикинул так что всё таки сделать возможно. и тут видос выходит. странные вещи происходят на карантине, походу это шиза)

@ДимаАбдукаримов-ж8й 3 года назад

Спасибо больше помог

@turgayalekberli9554 3 года назад

урок получился полезный, спасибо

@constvntine5453 4 года назад

Лайк😁

@kondysiuk 2 года назад

спасибо за видео!!!

@ruslanvybornov1237 4 года назад

круто, спасибо!)

@neins 3 года назад

Как вариант стрелочке можно было задать transition с rotate 180

@СашаТюменцев-ш9ь 2 года назад

спасибо!!!

@kolosrodoskyi 4 года назад

Пасиб

@egorburunkov3842 4 года назад

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

@BrainsCloud 4 года назад

Сначала же было показано на radio кнопках

@КонстантинБожеев 3 года назад

Вопрос! зачем?

@nurzhanovchanel 6 месяцев назад

Почему display: none - не правильно? Он все равно будет находится на странице 🤔

@ЕлидаНурланова Год назад

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

@БабкенГеворгян-ю9ю 4 года назад

Куда второй лайк поставить. Я из 🇦🇲🇦🇲. Знай братан 🇦🇲❤👉тебя

@Firzj 2 года назад

можно ли как-то сделать в css, чтобы раскрытый аккордеон двигал соседние элементы дальше вниз? Я использую flexbox и у меня checked чекбокс залазит и перекрывает соседние элементы не двигая их

@Skyleee-q3n 2 года назад

Здравствуйте, а как можно придать плавности появлении блоку с текстом?

@illia564 4 года назад

Почему , когда прописываю Transition: background(выделяется красным) , естественно на сайте ничего не происходит))

@Alex18Rus 3 месяца назад

Запомните! Аккордеон - это духовой инструмент, как баян, но справа не кнопки а клавиши (точно как на пианино)!

@ahil7800 2 года назад

Добрый день. Сделал по вашему ролику аккордеон, но мне надо в два столбика. Сделал ниже такой же div, и исправил faq1 и faq2 на faq3 и faq4. Но проблема в том, что когда открывается одна плитка, она тянет вниз соседние слева и справа элементы. Как решить эту проблему? Заранее Спасибо.

@noiseless6800 4 года назад

А где анимация?

@agvideography Год назад

8:00 продолжить

@Federation1323 4 года назад

Неужели я один эф ай кью произношу как FUCK? :D

@BrainsCloud 4 года назад

Был случай когда я так сказал обсуждая проект с манагерами в новой для меня компании. Посмеялись и разрядили обстановку ))

@CosmoTrades Год назад

Привет) Когда открываю аккордеон текст смещает в верх заголовок , то есть аккордеон открывается не в низ, а как будто в середину, смещая заголовок. Как можно пофиксить?

@АндрейПазуханич-ч9з 4 года назад

в чем разница между созданием подобных украшений на js и css? И что в приоритете выбирать?

@BrainsCloud 4 года назад

Такие вещи лучше делать на js, получится без лишних тегов и свойств. Данное видео лишь демонстрация, что можно и на css, но инпуты использованы не по их сути так сказать.

@denismaltcev3356 4 года назад

Большое спасибо за данное видео , Дмитрий у Вас есть курс вёрстка для начинающих , я на него подписался , пришло первые 7 уроков , после предложение по подписке , после получения оплаты за курс , всё уроки сразу приходят или по не дельно , и как долго к ним будет доступ? Заранее спасибо , с большим уважением, ваш подписчик )

@BrainsCloud 4 года назад

Привет. Доступ вы получаете сразу ко всему курсу и доступ выдается навсегда

@denismaltcev3356 4 года назад

Огромное спасибо за feed back вы лучший , Покупаю )

@denismaltcev3356 4 года назад

Оплатил , к курсу получил доступ) всё так профессионально сделанно единственно что возможно вы исправите после введения pin code , высвитилась Captcha vimeo . После подтверждения что я не робот , картинка пропадает , но картинки к самому курсу нет , я так понимаю для Вас важно чтоб она была , показывает что сервер не найден к самой картинке, а к урокам доступ есть всё в порядке) надеюсь этот комент лишним не будет ещё раз спасибо)

@BrainsCloud 4 года назад

@@denismaltcev3356 интересно, гляну этот момент, спасибо

@kolosrodoskyi 4 года назад

Вопрос назрел. А для браузера что легче воспроизвести? Вот такой вариант или JS? И вообще есть ли смьісл ''економить'' на JS?

@BrainsCloud 4 года назад

Лучше на js. Это так, развлечение

@DrRatelStrategy 3 года назад

а как из такого вертикалнього аккордеона сделать горизонтальный?

@alexanderfilippovich4757 4 года назад

Подскажите, можно сделать плавное появление текста?

@maxim7603 4 года назад

.faq-input:checked ~ .faq-text { transform: scaleY(1); } .faq-text { border: 1px solid #b91125; border-top: 0; transform: scaleY(0); transform-origin: top; padding: 10px 15px; color: #fff; font-size: 14px; transition: transform 0.3s linear; } И еще надо границу убрать у элемента родительского и поставить у label лучше через jquery, я щас попробовал, нижний элемент плавно вниз не сдвигается

@mihail4971 4 года назад

а как добавить плавность открытие блока. насколько я знаю с display none, block плавность не работает

@BrainsCloud 4 года назад

В данном случае никак, только js

@mihail4971 4 года назад

@@BrainsCloud а можно через селектор animation? и еще Дмитрий а у вас на сайте есть разъяснение что это за знаки в css "+, ~"

@Itzcrackerz 4 года назад

оооо движ париж

@alexeychernov3902 4 года назад

Доброго дня. Заказчик, как правило просит, плавно разворачивающийся блок, это возможно без js?

@BrainsCloud 4 года назад

Делайте на js, без него вроде как не получится, по крайней мере у меня не вышло

@alexeychernov3902 4 года назад

@@BrainsCloud Да вот тоже никак без js. Думал а вдруг все таки... А вот с радио кнопками идея понравилась. Такого применения чекам и радио еще не видел. Спасибо.

@ВладимирМуравьев-з2ы 4 года назад

@@alexeychernov3902 И не надо никогда так применять радиокнопки - они должны использоваться только по назначению.

@turtrueweb 4 года назад

@CheapDiamond-x6u Год назад

bez transition eto vse ravno ochen ploxo vigladit

@forest_1771 3 года назад

translateY покинул чат

@hikaruxi5423 4 года назад

А че так можно было чтоли? @_@

@grenzhochspannungshindernis 4 года назад

Я думал ты инструмент сделаешь и частушки матерные нам споешь, а ты... кликабайт короче...

@beebee-sn9sb Год назад

rsschool + v chat

@光荣归于习近平同志 4 года назад

Способ для извращенцев конечно, но весело

@AlexM-fv2nv 2 года назад

Хороший урок, спасибо!

@ВладимирМуравьев-з2ы 4 года назад

Не очень понимаю, почему все так хвалят это видео? Тэги форм нужно использовать по назначению. Нужно думать о людях со слабым зрением. Вы представляете, как это будет читать скринридер? А вообще, чем плох html5 элемент details? Который семантически верен в данном случае и доступен?

@Андрій-я6э 4 года назад

@макс-х9п9л 2 месяца назад

Я в самом деле не понимаю почему использован тег input, ведь это тег для ввода данных. Почему не использовать просто кнопку?

@freeze174fm 4 года назад

Просто, наглядно и понятно. Спасибо за Ваши уроки! :)

@selimaltayev3034 4 года назад

А в чем разница если делать это на чистом HTML и CSS или с использованием JS? Какой способ проще? И еще будете ли вы делать видео про пайтон или это уже не в сфере вашей деятельности? Заранее спасибо за ответ.

@АндрейРадинский-ж3д 2 года назад

Спасибо! Поставил лайк! А можно сделать так, чтобы текст выдвигался плавно, а потом плавно скрывался в html и css? Или это уже только через javascript?