Спойлер и аккордеон на HTML CSS и JavaScript, с возможностью включения на определенной ширине экрана
Vložit
- čas přidán 16. 06. 2024
- В этом уроке научимся делать очень интересные спойлеры и аккордеоны, которые можно включать или выключать в зависимости от ширины экрана. Писать будем на 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
🤟 Живи, а работай в свободное время! ©
Вот вам и практика на 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
Привет, можешь подсказать пожалуйста почему в консоли выходит ошибка "Uncaught ReferenceError: mediaBreakpoint is not defined"
Только вчера искал информацию по поводу спойлеров на чистом js. Огромное спасибо тебе за такой контент!)
Пожалуйста!
Спасибо, Дружище! Именно ты мотивируешь меня не бросать изучать вёрстку.
По началу мало что понимал, очень сложно и много кода, и когда закончил всё работало как то дёргано, а спойлеры на медиа запросах так вообще не работали. Но после часа копания в коде я не только исправил ошибки, но и понял разобрался во всём материале. Спасибо за уроки!
Спасибо тебе, Женя! Учусь по твоим урокам и хорошо осваиваю материал 😋
Спасибо. Круто. Понравилась фраза: "Проверим на наличие чувачков". Прям настроение поднялось :)
лучшее во всем интернете, супер подача и главное все разложено по полочкам. Спасибо!
Очень круто, спасибо! Пожалуйста не прекращай делать такие видео
Никогда!
Невероятный урок! Спасибо большое!
Ух ты, ещё новое видео! И когда ты Женя успеваешь их запиливать?)) круто!
Я сам в шоке)
Привет! Жека, я ждал этот видос! Спасибо! Как всегда, горы плюшек сверху 😊
Я рад!
Я делаю спойлеры не заморачиваясь, но посмотреть на прокачанную версию твоих будет очень интересно. Спасибо 😉
Да, тут я заморочился конкретно))
Шик, блеск красота)
Ждем Choices Select :DDDD
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье
Как же вовремя это видео! Спасибо большое!
Пожалуйста!
Женя, огромное спасибо! Обучаюсь на ваших видео!
Пожалуйста!
Ну просто кладязь информации. Спасибо огромное!)
Какой же блин афигенный канал. Очень люблю все твои видео
Женя, как всегда, на высоте! Спасибо за видео !!!!
Пожалуйста!
Жека, Ну эт прям оч крутой выпуск получился. Очень подробно. Спасибо)))
Пожалуйста!
Спасибо бро, ты многому меня научил) Respect
Я рад!
19:00 addListener считается устаревшим и может быть выпилен в новых версиях браузеров, вместо него лучше писать matchMedia.addEventListener('change', () => {
initSpoilers(spoilers, matchMedia);
});
У меня и с этим кодом не работает
выпилен? серьезно? еще лет 10 будет работать...
Мозг закипел =D Спасибо за такой контент!!!
Даже странно, что у такого перспективного человека так мало аудитории. Надеюсь вы не перестанете трудиться над своими проектами.
Желаю удачи во всем дальнейшем развитии!
Спасибо большое за урок 👍
Дякую! Дуже гарна штука. Зробила за допомогою її на своєму сайті-резюме спойлери з досвідом.
Хоть я уже и умею делать спойлеры, но уверен, что после просмотра видео, буду делать твоим способом)
Спасибо большое!!! Как хорошо что ты есть!!!
Пожалуйста!
Очень полезная информация Спасибо Хорошая задумка разделить экран на два, но лучше когда их показываешь иногда, а код писать на полном экране и в большем масштабе ( лучше читается ) Сейчас на видео очень мелко
Женя, твои обучающие видосы для меня - как сходить в кафешечку с другом, взять капучино и чизкейк и просто хорошо пообщаться) Только научиться в этом случае)
Я рад!
Здорово! Спасибо большое! Предполагаю, что многие были бы очень благодарны тебе ещё и за кастомный select на js))
Ага)
Он уже есть, только без объяснений. Доступен патреонам, например, в уроке про формы
@@kotlancer В выше написанном имелось в виду то, что тем, кто не может оформить платную подписку на патреоне, очень бы хотелось увидеть бесплатное видео про кастомизацию select на js с объяснениями от Жени)
Уверен, что будет, когда у Жени руки до этого дойдут)
Спасибо, лайк и комментарий в поддержку канала!)
Ураааа, новое видео! 😍💪🏻
Ура!
очень интересно смотреть, спасибо
Попробовал - работает, спасибо, буду пользоваться !:)
Так держать, палец вверх!
Спасибо!
Лайк и коммент в поддержку канала 👍
Спасибо!
Видео попозже посмотрю но лайк сейчас ставлю)
Спасибо!
Фрилансер привет! Твои видосы это пушка, узнал по ним много нового, запили гайд по WordPress, по популярному плагину advanced custom fields, как его настраивать в админке понятно, а вот как интегрировать в определенные области например у меня вызывает затруднение, было бы круто увидеть урок по нему. Так как там нужно делать определенные php вставки, а у меня с php пока туговато:) спасибо!
Ой-ёй-ёй-ёй-ёй, если еще и подобные табы нам "подаришь", точно уйду от JQ! :D
Большое спасибо, забрал себе :))))
Конечно, невопрос)
Женя спасибо за урок! Вот бы еще отдельно показал код где не нужно привязываться к ширине экрана
Круто, удачи тебе и спасибо
👍 Вподобайка та комент 🔥🔥🔥
Дяка
Спасибо вам за ваши полезные уроки и видео, хотел спросить сможете ли вы сделать видео про семантику, где какие тэги надо использовать и правильное наменованте классов? Спасибо заранее:)
Все вийшло. Працює. Тепер користуюся цим функціоналом. Дякую за урок.
Здравствуйте, спасибо огромное за ваши старания! Хотелось бы спросить :"Когда плейлист с посадкой сайта на cms? "
Заранее спасибо!
Пожалуйста!
Мега, мега штука ❤🔥
Спасибо, отличное видео. нет ли в планах, записать видео по сознанию кастомного выпадающего списка (select)? возможно зависимого от другого селекта?
Есть
@@FreelancerLifeStyle очень буду ждать, спасибо
Спасибо Женя - великолепный урок.
А как горизонтальный аккордеон - будет работать?
Эхх, когда-нибудь я достигну уровня JS, а пока работаем над практикой в Scss! (Видос не смотрел, но лайкос естестно влепил)
Спасибо!
круто очень!!
Спасибо!
Жень, давай больше по основам js) по html/css у тебя всего навалом, а вот по базовому javascript очень не хватает, альтернативной подачи к сожалению не нахожу)
Так целый курс по основам js выпустил..
Я не успеваю просмотреть видео)) пока я смотрю одно, выходит два
Ну, будет что смотреть)
Жень, а будет ли видос про кроссбраузерность и как ее добиться?
Было бы очень интересно узнать как делаются бегунки и двойные бегунки, счетчики и тд. Что встречается в магазинах.
Дякую за відео👍
Годнота)
Жека, а ты можешь сделать видео по натяжке верстки на движки опенкарт и вордпресс? Я так понимаю на фриланс биржах такая услуга весьма популярна.
Классный видос, спасибо. А почему ты не юзаешь spread [...elements], чтобы получить массив из коллекции нод листа? На выходе получается тот же массив.
Жень, а что такое в //событиях addListener ? Что-то я тупанул... не могу найти ответ в google((( Это же не метод addEventListener() наверное ?
Это устаревший метод интерфейса MediaQueryList, сейчас вместо него нужно использовать .addEventListener('change', callback), вместо .addEvent(callback)
Спасибо!!!
прикольно, ты часто эти фишки используешь?
спасибо, я кажется познал споллердзен
Нажал лайк не посмотреть до конца, потому что знаю что это классно
Спасибо!
Привет! Спасибо за твои видосы. По возможности создай менюшку как на Алиэкспресс, которая выезжает вправо (мега меню)
Жека, подскажи
Ты работал с вордпресс, как этот атрибут (data-spoller) добавить к пункту меню(напр: для меню для футера), если у нас меню редактируется через админку
Почитайте статью про Walker_Nav_Menu{} на wp-kama
Там есть пример создания кастомного меню где вы можете редактировать как ul так и элементы li
Например вставить атрибут только для определенного пункта меню (Новости в данном примере)
$attr = '';
if ($item->post_name == 'news') {
$attr .= ' data-spoller ';
}
$output .= $indent . '';
--------------------------------------
Если атрибут нужен на весь список ul, то можно обойтись без Walker_Nav_Menu{}
@@valehsalimov спасибо) почитаю
А виджет под спойлер тоже можно поместить?
Женя, JS-фреймворк не учил никакой?
Жека, ты нас всех 2 года обманывал. Ты не верстальщик. Ты программист в первую очередь!!!))) А уже потом верстальщик) За слайдТогл отдельное спасибо.
Как сделать так, чтобы при наведении на ссылку, состоящую из нескольких элементов, в том числе картинки, менялся цвет фона и шрифта?
Почему data-spollers? А не data-spoilers?
Подскажите, можно ли сделать, что бы спойлер закрывал открытый при нажатии на закрытый. То есть что бы не возможно было сделать сразу открытыми 2 спойлера.
включи мозг
Сможете рассказать про "говнокод"?
Часто вижу, как комментаторы обвиняют блогеров-верстальщиков в "говнокодировке", не уточняя где именно автор допускал ошибки.
Говнокод может вообще не содержать ошибок и исправно работать. Только он может быть избыточным (больше 100 строк кода для спойлера), с неоптимально подобранными именами (треть слов в коде это spoller в разных вариациях) ввиду чего сложно читается и понимается
Ребят, кто нибудь может скинуть материалы урока?
👍
интересно было бы посмотреть где и когда его можно применять?
Добрый день, Может сможете помочь
Подскажите где можно найти простую карточную игру (качество и сложность не важно. лучше что-то по проще..)
HTML, CSS, JS, MySQL
Описание: Регистрация игрока, Минимум два участника
Буду очень, благодарен, Спасибо)!
Можна зробити додатковий захист від дурнів.
Наприклад, візьмемо параметри (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();
};
Прикольно, но не вижу смысла так заморачиваться со стандартным элементом интерфеса, делающимся в 2 клика с помощью готовых решений. Разве что попрактиковать JS?
Отличный спойлер!) но сегодня больше 3 часов не мог понять почему он у меня не работает, а оказалось, что нельзя задавать какое либо значение display скрывающемуся блоку...
Трейтий!!
Красава
Привет, Жека. Наверное я не твоя фактическая аудитория, но хочу тебе выразить респект и слова благодарности. Так вышло, что я учился на факультет информационных систем. Подошло дело диплома, и стал выбор отдавать 50к р. или чего-то делать. Слава богу, я предприниматель и у меня есть верстка сайта, которую мне делали за 10к, с js. Ну в общем за 3 дня я посмотрел все твои ролики из плейлиста «курс по верстке». Ну так вот еду домой после защиты, защитил на 5. Никогда в жизни не притронусь к верстке сайтов, зато смогу контролировать исполнителей. В общем просто от чистого сердца спасибо за такой доступный способ изложения и за огромный тяжёлый труд и кучу убитого на это (сценарий, съёмки) времени. Спасибо)
Жека, все круто. Единственное что режет слух, это английский. Форыч, это не фамилия, это кемел кейс, а значит 2 разных слова. Фор ич. Ну и так далее. Советую все таки воспользоваться Гугл переводчиком и там есть прослушать. Зачастую говорит правильно. Это не придирка, все же делай как тебе удобно, просто эту мелочь можно легко подтянуть как по мне, а в идеале, если бы ты говорил ещё и перевод данной функции или свойства.
Тот же фор ич переводится как "по каждому", "для каждого". Уже сразу становится намного проще понимать что происходит и что ты делаешь. Вот это было бы круто. Но тут надо посидеть пару часов, потыкать в Гугл переводчик слова с какого то проекта, послушать, что то где то записать. Но мне кажется день, который ты на это все потратишь, явно не пройдет в пустую, потому что я надеюсь у тебя ещё не один ролик выйдет))
Ясно, спасибо
нихера не понял, но было интересно)
Классно, может кто подсказать как обработать клик на мобилке, click(), on() тачстарты/енды и т.д. не работают
Жека...... (будет спойлер, я скажу тебе спасибо за спойлер!) Спасибо за спойлер!
Аккардеоны с заданной шириной не работают, перепроверил все, html, css и самое главное js, вроде ошибок нет... не работаю, даже + не выводится...
Нужно еще раз перепроверить)
Получилось решить проблему?
вообще непонятно причем тут феиро с спойлеры на чистом джаваскрипте, конец связи
16:12 и всё же мне не понятна логика 38-ой строки.
Что-то ВООБЩЕ не работает, все точно также сделал. Или код уже устарел?
тож самое 4часа потратил,у вас уже получилось?
@@bake5448 нет
автор всё усложняет((аккардеон делается за 4 минуты,с 2мя строчками кода!
Почему он пишит spoller вместо spoiler
++++
Шрифт слишком маленький для удобного просмотра
Первый!!!
Тупо красавчик
Немного смущают 36 ошибок.
мне одному так тяжело дается JS?
Жека, как всегда, ЛУЧШИЙ!!!