Меню аккордеон на чистом JS за 10 мин.
Vložit
- čas přidán 5. 09. 2021
- Привет в етом видео за 10 мин мы с тобой научимся делать меню аккордеон.
Для чего нужен этот навык.
Все очень просто в начале видео я показываю на конкретном сайте где используется аккордеон для блока, "Ответы на вопросы" на коммерческом сайте услуг. По этому этот навык поможет тебе в будущем.
Технологии который мы будем использовать - html/css/js.
Спасибо, полезное видео!
Афигеть бро, спасибо! долго я сидел в попытках понять как это работает конечно)
Пожалуйста, обращайся
Привет очень круто и понятно но хотелось что бы была кнопка + и когда нажимаем на аккардеон + сменился на - , можно и на стрелочках вверх, вниз, а так все супер - спасибо )
Супер! Спасибо большое!
Обращайся
Спасибо, отличное решение, для тех кому нужен отступ добавьте margin как подсказали ниже. Я добавил как и отступ к кнопке как и к раскрывающемуся контенту и все четко
Да огонь
Спасибо дружище!
Спасибо, открыл для себя scrollHeight у элементов. Посколько для плавного открытия и закрытия "display: block/none" не годится, то приходится заменять высотой. И не просто height, а именно max-height.
Обращайся
@@Illya.Landar друг не подскажешь как стилизовать аккордион?
@@lyublyutvoyumat1495 ну он минимально стилизован на видео, уточни вопрос.
Очень познавательно ,спасибо большое
Пожалуйста
Спасибооо, у других людей скучно и долго, тут быстро и понятно, лайк подписка)
Пожалуйста
Спасибо, как раз искал чтоб только один открывался, у других авторов такого нет
Обращайся
так можно по разному делать плюс минус несколько строк кода. можно по дата атрибутам искать и тд. чтобы при клике удалять класс open у всех перед тем как добавить тому куда ты нажмешь.
@@anatolyannenko1821 да
класный урок супер
Хороший ролик, продолжайте еще
Благодарю
Коротко, по суті, дякую 👍
Обращайся
Спасибо!!!! 😎
Пожалуйста.
спасибо друг, помог!
Обращайся
Лучшее решение что я видела! Спасибо!
Обращайся
спасибо четко вышло
Обращайтесь
Огромное спасибо!всё получилось за 10 минут!вот как сделать чтоб без нажатия не закрывался??ну чтоб могло быть 2-3 открытых сразу???
7:41 - 46 строчка закрывает все аккордеоны а потомна 47 строки открывает на который ты кликнул. Убери 46 строчку и должно заработать.
@@Illya.Landar попробую!спасибо
Илья, а скажи, пожалуйста, как ты считаешь, какая анимация аккордеона лучше - та, что ты в видео показываешь либо циклом уменьшать свойство height? Мне твой вариант нравится больше, но на работе разразилась дискуссия. Мне сказали, что лучше циклом уменьшать height. Но я против, потому что тогда анимацию приходится делать самостоятельно на js, а в твоем варианте транзишн нативный из CSS. Получается твой вариант более эффективный, на мой взгляд. Какие плюсы и минусы обоих вариантов, не знаешь? Возможно, циклом уменьшать свойство height (а не max-height) - более надежный вариант, не? Есть какие-то аргументы?
Аргументы следующие.
1) Анимацию можно контролировать легко с помощью css
2) Css меньше нагружает сайт чем js
3) Css легче поддерживать в дальнейшем в отличии от javascript
Но ты должен понять еще следующее. Если на работе сказали тебе стоит выполнять. Ибо тебя наняли что бы ты выполнял их требования а не спорил. Так что предложить можешь, а вот спорить нет. Соглашаться им с твоими аргументами или нет это их дело. Это же у них потом сайт из - за таких навалившихся мелочей будет дольше грузиться. А если уже хочешь диктовать свои правила то тебе надо будет свой бизнес создавать. Но бизнес это не про веб разработку а про многое другое.
@@Illya.Landar понял, спасибо. Аргументы взял себе на вооружение)
@@deniskotov Обращайся
Спасибо,интересное решение,вроде все понятно но у меня не работает!)) В консоле ошибки нет!
Если возможно пожалуйста прикрепляй исходный код под видео,еще шрифт можно крупнее сделать,приходиться сильно вглядыватся!
Пересмотри ролик и перепиши. У ребят других в комментах все работает. Где - то ошибка из - за не внимательности скорее всего
@@Illya.Landar так и есть. делал как у тебя, но со своими дополнениями. и как итог - все работает
@@Killguf рад помочь
@@Illya.Landar кстати, можно узнать, у тебя есть образование ? и сколько понадобилось времени, чтобы изучить весь материал и попасть на первую работу
@@Killguf образование бросил с 2 курса(учился на программиста) года 2. Но уже во время этих 2 лет я чу чуть зарабатывал с фриланса
Автор, пожалуйста увеличивай шрифт в редакторе когда записываешь свои видео! Мы ведь не на весь экран разворачиваем, нам ведь еще и в редактор все надо записывать!
вот это нормальный шовндавн
Здравствуйте, подскажите пожалуйста как добавить на против button стрелочку?
Можно как то так
Button
При добавлении padding-top и padding-bottom к контенту, он перестают сворачиваться полностью. Подскажите, пожалуйста, как решить эту проблему.
2:09 использую padding и все работает.
Опиши детальней
Тоже возник такой вопрос, скорее всего я сильно опоздал, но если вдруг у кого-нибудь тоже возникнет, сэкономлю 5 минут времени.
В данном примере не стоит задавать отступы конкретно content, лучше использовать его как обёртку и работать с внутренними
@@Illya.Landar Ты используешь padding для кнопки, а Евгений имел ввиду добавление падингов к контенту, в этом случае он не скрывается методом height: 0 , ведь отступы остаются.
Если ты всё ещё ищёшь - создай класс который будешь добавлять к своему контенту при нажатии, и в неём добавляй паддинг и высоту.
Что делать если контенту задать паддинг, то макс-хейт уже не работает
Используй маржин вместо падинг
Классный видос, но как сделать, что еще и класс добавлялся нажатому, а тому кто не нажат удалялся?
Ты прям сформировал гугл запрос) Просто найди в документации javascript как удалять добавлять классы И при клике удаляй и добавляй классы
Это не сложно, используешь онклик ремум и эдиди, погугли лучше
Бля, три цикла для простого акордеона 😆
Получаеться
@@Illya.Landar Да я понял )
@@oleksiipivniev8433 Может ты тот гений который найдет решение без циклов.
@@Illya.Landar Насчёт гения не знаю, но, чтобы не использовать три цикла, можна вспомнить про делегирование )
Учусь на фронтенда и js не понимаю вообще. Дали задание, где нужно подключить аккордион с готовым решением, но ни одна библиотека не работает и метод автора тоже...ну к черту этот js
Вон в комментариях пишут слова благодарности. Значит решение работает. Я могу тебе помочь выучить js, на личной консультации.
modal.js:194 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at modal.js:194:20
script.js:8 Uncaught TypeError: Cannot read properties of null (reading 'style')
at HTMLButtonElement. (script.js:8:20)
Не правильному элементу задал addEventListener
ЧЁРТ
у этого скрипта как минимум 3 ошибки
На видео все работает
Написал точь в точь, но почему то аккордеон только открывает, но не закрывается....
document.querySelectorAll('.q-answers__title').forEach((el) => {
el.addEventListener('click', () => {
let content = el.nextElementSibling;
if (content.style.maxHeight) {
document.querySelectorAll('.content').forEach((el) => el.style.maxHeight = null)
} else {
document.querySelectorAll('.content').forEach((el) => el.style.maxHeight = null)
content.style.maxHeight = content.scrollHeight + 'px'
}
})
})
Значит не точь в точь. В комментариях у всех все получается. Кроме js еще html важен. Пересмотри код
Код рабочий, применил у себя. Копируйте.