Спойлер и аккордеон на HTML CSS и JavaScript, с возможностью включения на определенной ширине экрана

В этом уроке научимся делать очень интересные спойлеры и аккордеоны, которые можно включать или выключать в зависимости от ширины экрана. Писать будем на HTML CSS и чистом JavaScript
☝️Fairo - единственное приложение, в котором все бизнес-функции включены в один бизнес-аккаунт за фиксированную ежемесячную плату.
👉Сайт: bit.ly/3sBJJ73
👉Скачать приложение для Android: bit.ly/3qEWJXQ
👉Скачать приложение для iOS: apple.co/32QExjV
👉Материалы урока (патреон): / 51473114
💪 Курс по верстке: edu.fls.guru
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - В выпуске
00:32 - РЕКЛАМА: Fairo
01:31 - Пишем HTML
04:54 - Пишем CSS
07:23 - Пишем JavaScript
33:24 - Результат
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

Вот вам и практика на JS :) 🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/ 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@tyncherov_v7663]

Привет, можешь подсказать пожалуйста почему в консоли выходит ошибка "Uncaught ReferenceError: mediaBreakpoint is not defined"

[@NillineReshetnyak]

Только вчера искал информацию по поводу спойлеров на чистом js. Огромное спасибо тебе за такой контент!)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-lm9gg6oc6n]

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

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье

[@red53dhj5ry32rtty83e]

Спасибо, Дружище! Именно ты мотивируешь меня не бросать изучать вёрстку.

[@alexforce7129]

лучшее во всем интернете, супер подача и главное все разложено по полочкам. Спасибо!

[@web2905]

Спасибо. Круто. Понравилась фраза: "Проверим на наличие чувачков". Прям настроение поднялось :)

[@konstantino7016]

Ух ты, ещё новое видео! И когда ты Женя успеваешь их запиливать?)) круто!

[@FreelancerLifeStyle]

Я сам в шоке)

[@user-wh2so2iz1o]

Спасибо тебе, Женя! Учусь по твоим урокам и хорошо осваиваю материал 😋

[@user-rj3pp7hj7i]

Очень круто, спасибо! Пожалуйста не прекращай делать такие видео

[@FreelancerLifeStyle]

Никогда!

[@user-um5vx4ez1p]

Привет! Жека, я ждал этот видос! Спасибо! Как всегда, горы плюшек сверху 😊

[@FreelancerLifeStyle]

Я рад!

[@ye5275]

Невероятный урок! Спасибо большое!

[@rnyt.o]

Даже странно, что у такого перспективного человека так мало аудитории. Надеюсь вы не перестанете трудиться над своими проектами. Желаю удачи во всем дальнейшем развитии!

[@vakaa21]

Я делаю спойлеры не заморачиваясь, но посмотреть на прокачанную версию твоих будет очень интересно. Спасибо 😉

[@FreelancerLifeStyle]

Да, тут я заморочился конкретно))

[@laikaboss9047]

Какой же блин афигенный канал. Очень люблю все твои видео

[@anastasea9101]

Как же вовремя это видео! Спасибо большое!

[@FreelancerLifeStyle]

Пожалуйста!

[@artikor8071]

Шик, блеск красота) Ждем Choices Select :DDDD

[@lostsouls3151]

Ну просто кладязь информации. Спасибо огромное!)

[@gio2156]

19:00 addListener считается устаревшим и может быть выпилен в новых версиях браузеров, вместо него лучше писать matchMedia.addEventListener('change', () => { initSpoilers(spoilers, matchMedia); });

[@user-et1xj4kd6o]

У меня и с этим кодом не работает

[@user-or1hy4xz8u]

выпилен? серьезно? еще лет 10 будет работать...

[@user-rp4xr6vf2m]

Женя, как всегда, на высоте! Спасибо за видео !!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-qk4gh8cn6t]

Очень полезная информация Спасибо Хорошая задумка разделить экран на два, но лучше когда их показываешь иногда, а код писать на полном экране и в большем масштабе ( лучше читается ) Сейчас на видео очень мелко

[@user-fz9eh9bj5b]

Женя, огромное спасибо! Обучаюсь на ваших видео!

[@FreelancerLifeStyle]

Пожалуйста!

[@alshabanov]

Жека, Ну эт прям оч крутой выпуск получился. Очень подробно. Спасибо)))

[@FreelancerLifeStyle]

Пожалуйста!

[@deniskotov]

Женя, твои обучающие видосы для меня - как сходить в кафешечку с другом, взять капучино и чизкейк и просто хорошо пообщаться) Только научиться в этом случае)

[@FreelancerLifeStyle]

Я рад!

[@DashaGermash]

Дякую! Дуже гарна штука. Зробила за допомогою її на своєму сайті-резюме спойлери з досвідом.

[@ilyaprotsenko1023]

Здорово! Спасибо большое! Предполагаю, что многие были бы очень благодарны тебе ещё и за кастомный select на js))

[@FreelancerLifeStyle]

Ага)

[@kotlancer]

Он уже есть, только без объяснений. Доступен патреонам, например, в уроке про формы

[@ilyaprotsenko1023]

@@kotlancer В выше написанном имелось в виду то, что тем, кто не может оформить платную подписку на патреоне, очень бы хотелось увидеть бесплатное видео про кастомизацию select на js с объяснениями от Жени)

[@kotlancer]

Уверен, что будет, когда у Жени руки до этого дойдут)

[@user-fl3gs6zx5g]

Спасибо бро, ты многому меня научил) Respect

[@FreelancerLifeStyle]

Я рад!

[@kotlancer]

Ой-ёй-ёй-ёй-ёй, если еще и подобные табы нам "подаришь", точно уйду от JQ! :D Большое спасибо, забрал себе :))))

[@FreelancerLifeStyle]

Конечно, невопрос)

[@user-np9mq5xc7j]

Мозг закипел =D Спасибо за такой контент!!!

[@yaroslavqwerty8609]

Хоть я уже и умею делать спойлеры, но уверен, что после просмотра видео, буду делать твоим способом)

[@user-th4gy4sz8j]

Спасибо большое за урок 👍

[@danilafipsk]

Фрилансер привет! Твои видосы это пушка, узнал по ним много нового, запили гайд по WordPress, по популярному плагину advanced custom fields, как его настраивать в админке понятно, а вот как интегрировать в определенные области например у меня вызывает затруднение, было бы круто увидеть урок по нему. Так как там нужно делать определенные php вставки, а у меня с php пока туговато:) спасибо!

[@commentator7826]

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

[@user-yi9pq3th4o]

Спасибо большое!!! Как хорошо что ты есть!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@jabaaaa]

Попробовал - работает, спасибо, буду пользоваться !:)

[@user-eh8sz3nr5y]

очень интересно смотреть, спасибо

[@valentynbilan]

Ураааа, новое видео! 😍💪🏻

[@FreelancerLifeStyle]

Ура!

[@royal_aver4403]

Женя спасибо за урок! Вот бы еще отдельно показал код где не нужно привязываться к ширине экрана

[@evgenijshevchuk1551]

Круто, удачи тебе и спасибо

[@user-xr7wr8rt4v]

Так держать, палец вверх!

[@FreelancerLifeStyle]

Спасибо!

[@user-sf7lz8fn4r]

Мега, мега штука ❤‍🔥

[@konstantino7016]

Лайк и коммент в поддержку канала 👍

[@FreelancerLifeStyle]

Спасибо!

[@AlexBatin]

Видео попозже посмотрю но лайк сейчас ставлю)

[@FreelancerLifeStyle]

Спасибо!

[@daniayrkulsin3836]

Заранее спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@sanjar5862]

Спасибо вам за ваши полезные уроки и видео, хотел спросить сможете ли вы сделать видео про семантику, где какие тэги надо использовать и правильное наменованте классов? Спасибо заранее:)

[@kyryloloshka]

Все вийшло. Працює. Тепер користуюся цим функціоналом. Дякую за урок.

[@stefanskyi_]

👍 Вподобайка та комент 🔥🔥🔥

[@FreelancerLifeStyle]

Дяка

[@DzmitryArtsiamkou]

Спасибо!!!

[@alonahilbert9959]

Дякую за відео👍

[@maks-rst]

Эхх, когда-нибудь я достигну уровня JS, а пока работаем над практикой в Scss! (Видос не смотрел, но лайкос естестно влепил)

[@FreelancerLifeStyle]

Спасибо!

[@InspireInki]

Здравствуйте, спасибо огромное за ваши старания! Хотелось бы спросить :"Когда плейлист с посадкой сайта на cms? "

[@hannstar2236]

Жень, давай больше по основам js) по html/css у тебя всего навалом, а вот по базовому javascript очень не хватает, альтернативной подачи к сожалению не нахожу)

[@FreelancerLifeStyle]

Так целый курс по основам js выпустил..

[@topalek]

Спасибо, отличное видео. нет ли в планах, записать видео по сознанию кастомного выпадающего списка (select)? возможно зависимого от другого селекта?

[@FreelancerLifeStyle]

Есть

[@topalek]

@@FreelancerLifeStyle очень буду ждать, спасибо

[@vitamax3777]

круто очень!!

[@FreelancerLifeStyle]

Спасибо!

[@ghenadirev2725]

Спасибо Женя - великолепный урок. А как горизонтальный аккордеон - будет работать?

[@plasticassholes8403]

Было бы очень интересно узнать как делаются бегунки и двойные бегунки, счетчики и тд. Что встречается в магазинах.

[@kolyabyntov]

Я не успеваю просмотреть видео)) пока я смотрю одно, выходит два

[@FreelancerLifeStyle]

Ну, будет что смотреть)

[@zmeygorynych5684]

Годнота)

[@WladimirTarasov]

спасибо, я кажется познал споллердзен

[@r3pz349]

Жень, а будет ли видос про кроссбраузерность и как ее добиться?

[@user-lb4xg6jf6j]

Жека, а ты можешь сделать видео по натяжке верстки на движки опенкарт и вордпресс? Я так понимаю на фриланс биржах такая услуга весьма популярна.

[@viktorkasap]

Классный видос, спасибо. А почему ты не юзаешь spread [...elements], чтобы получить массив из коллекции нод листа? На выходе получается тот же массив.

[@user-wf4np1ne2c]

прикольно, ты часто эти фишки используешь?

[@stelsboii]

Жека, подскажи Ты работал с вордпресс, как этот атрибут (data-spoller) добавить к пункту меню(напр: для меню для футера), если у нас меню редактируется через админку

[@valehsalimov]

Почитайте статью про Walker_Nav_Menu{} на wp-kama Там есть пример создания кастомного меню где вы можете редактировать как ul так и элементы li Например вставить атрибут только для определенного пункта меню (Новости в данном примере) $attr = ''; if ($item->post_name == 'news') { $attr .= ' data-spoller '; } $output .= $indent . ''; -------------------------------------- Если атрибут нужен на весь список ul, то можно обойтись без Walker_Nav_Menu{}

[@stelsboii]

@@valehsalimov спасибо) почитаю

[@deniskotov]

Жека, ты нас всех 2 года обманывал. Ты не верстальщик. Ты программист в первую очередь!!!))) А уже потом верстальщик) За слайдТогл отдельное спасибо.

[@jahongirbektemirov6516]

Нажал лайк не посмотреть до конца, потому что знаю что это классно

[@FreelancerLifeStyle]

Спасибо!

[@user-yw7nm7wg2d]

Жень, а что такое в //событиях addListener ? Что-то я тупанул... не могу найти ответ в google((( Это же не метод addEventListener() наверное ?

[@martinruston]

Это устаревший метод интерфейса MediaQueryList, сейчас вместо него нужно использовать .addEventListener('change', callback), вместо .addEvent(callback)

[@user-gg8gt7jk8l]

Женя, JS-фреймворк не учил никакой?

[@user-df9tk5bi9z]

Привет! Спасибо за твои видосы. По возможности создай менюшку как на Алиэкспресс, которая выезжает вправо (мега меню)

[@user-zi9vv3zb3m]

Подскажите, можно ли сделать, что бы спойлер закрывал открытый при нажатии на закрытый. То есть что бы не возможно было сделать сразу открытыми 2 спойлера.

[@user-ei8ib3mq2q]

включи мозг

[@stelsboii]

👍

[@user-gu6ku3ni7b]

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

[@RRRAMDesh]

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

[@danielkhachaturian951]

Почему data-spollers? А не data-spoilers?

[@veterok54]

Жека, все круто. Единственное что режет слух, это английский. Форыч, это не фамилия, это кемел кейс, а значит 2 разных слова. Фор ич. Ну и так далее. Советую все таки воспользоваться Гугл переводчиком и там есть прослушать. Зачастую говорит правильно. Это не придирка, все же делай как тебе удобно, просто эту мелочь можно легко подтянуть как по мне, а в идеале, если бы ты говорил ещё и перевод данной функции или свойства. Тот же фор ич переводится как "по каждому", "для каждого". Уже сразу становится намного проще понимать что происходит и что ты делаешь. Вот это было бы круто. Но тут надо посидеть пару часов, потыкать в Гугл переводчик слова с какого то проекта, послушать, что то где то записать. Но мне кажется день, который ты на это все потратишь, явно не пройдет в пустую, потому что я надеюсь у тебя ещё не один ролик выйдет))

[@FreelancerLifeStyle]

Ясно, спасибо

[@user-vatican]

интересно было бы посмотреть где и когда его можно применять?

[@Roman.Volodchenkov]

Можна зробити додатковий захист від дурнів. Наприклад, візьмемо параметри (650,min). Якщо замість першого параметру поставити пробіл, тобто ( ,min). То такий спойлер буде вважатися як спойлер з медіа запитом, тому що [0] елемент буде існувати, але такий запис повинен вважатися як звичайний спойлер. Для вирішення цього питання достатньо додати .trim() під час повернення значення для звичайного спойлера. Наприклад: const spoilersArray = Array.from(document.querySelectorAll('[data-spoilers]')); if (spoilersArray.length > 0) { const spoilersRegular = spoilersArray.filter((element) => { return !element.dataset.spoilers.split(",")[0].trim(); }); }; Але щоб запис ( ,min) не вважався медійним спойлером, .trim() також треба додати до повернення значення медійних спойлерів. В іншому випадку такий запис буде потрапляти в обидві категорії. const spoilersMedia = spoilersArray.filter((element) => { return element.dataset.spoilers.split(",")[0].trim(); };

[@Rb-ur5em]

Добрый день, Может сможете помочь Подскажите где можно найти простую карточную игру (качество и сложность не важно. лучше что-то по проще..) HTML, CSS, JS, MySQL Описание: Регистрация игрока, Минимум два участника Буду очень, благодарен, Спасибо)!

[@user-mw8hz1hc6z]

Привет, Жека. Наверное я не твоя фактическая аудитория, но хочу тебе выразить респект и слова благодарности. Так вышло, что я учился на факультет информационных систем. Подошло дело диплома, и стал выбор отдавать 50к р. или чего-то делать. Слава богу, я предприниматель и у меня есть верстка сайта, которую мне делали за 10к, с js. Ну в общем за 3 дня я посмотрел все твои ролики из плейлиста «курс по верстке». Ну так вот еду домой после защиты, защитил на 5. Никогда в жизни не притронусь к верстке сайтов, зато смогу контролировать исполнителей. В общем просто от чистого сердца спасибо за такой доступный способ изложения и за огромный тяжёлый труд и кучу убитого на это (сценарий, съёмки) времени. Спасибо)

[@alexkom7952]

Отличный спойлер!) но сегодня больше 3 часов не мог понять почему он у меня не работает, а оказалось, что нельзя задавать какое либо значение display скрывающемуся блоку...

[@Reaper-zh7si]

Сможете рассказать про "говнокод"? Часто вижу, как комментаторы обвиняют блогеров-верстальщиков в "говнокодировке", не уточняя где именно автор допускал ошибки.

[@user-dv9fk1hd3s]

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

[@meirjanilesh2378]

Трейтий!!

[@FreelancerLifeStyle]

Красава

[@privet_baget]

Прикольно, но не вижу смысла так заморачиваться со стандартным элементом интерфеса, делающимся в 2 клика с помощью готовых решений. Разве что попрактиковать JS?

[@misterpopcorn8789]

нихера не понял, но было интересно)

[@dovudtulkinjonov5400]

Ребят, кто нибудь может скинуть материалы урока?

[@alien2364]

Жека...... (будет спойлер, я скажу тебе спасибо за спойлер!) Спасибо за спойлер!

[@smartpeople4329]

Аккардеоны с заданной шириной не работают, перепроверил все, html, css и самое главное js, вроде ошибок нет... не работаю, даже + не выводится...

[@FreelancerLifeStyle]

Нужно еще раз перепроверить)

[@jusanert7476]

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

[@netbin]

вообще непонятно причем тут феиро с спойлеры на чистом джаваскрипте, конец связи

[@AlexJ0ker]

Классно, может кто подсказать как обработать клик на мобилке, click(), on() тачстарты/енды и т.д. не работают

[@JUN-17]

16:12 и всё же мне не понятна логика 38-ой строки.

[@user-et1xj4kd6o]

Что-то ВООБЩЕ не работает, все точно также сделал. Или код уже устарел?

[@bake5448]

тож самое 4часа потратил,у вас уже получилось?

[@user-et1xj4kd6o]

@@bake5448 нет

[@user-ei8ib3mq2q]

автор всё усложняет((аккардеон делается за 4 минуты,с 2мя строчками кода!

[@user-ri1ry7sx6p]

Первый!!!

[@FreelancerLifeStyle]

Тупо красавчик

[@bandhdhdh7188]

Шрифт слишком маленький для удобного просмотра

[@user-hp5yw6gn6w]

Почему он пишит spoller вместо spoiler

[@user-wd6mi7hk4z]

++++

[@user-ok8nn9ft8c]

Немного смущают 36 ошибок.

[@user-gg4dv2rx2g]

Жека, как всегда, ЛУЧШИЙ!!!