Как сделать аккордеон на: чистом CSS / прекрасном JS / ужасном jQuery?

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии • 100

  • @prosto_razrabotka
    @prosto_razrabotka  4 года назад

    😎 Получить исходники и другие преимущества - 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-Kirienko.O.L
    @user-Kirienko.O.L 7 месяцев назад

    Господи! Добрый Юноша! Я только это всё изучаю, зарабатывать, даже не пыталась, но если не получается решить ту или иную задачу, у меня останавливается МИР ! Милый, Виталий, Вы возвращаете меня к жизни! Иногда для решения мне не хватает какой-нибудь мелочи, а вы всё наглядно объясняете ! ! ! Спасибо Вам ОГРОМНОЕ ! ! !

  • @DjekasUzumaki
    @DjekasUzumaki 4 года назад +11

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

    • @prosto_razrabotka
      @prosto_razrabotka  4 года назад +2

      Спасибо -))

    • @aikkku
      @aikkku 4 года назад +1

      😂😂😂интересный случай

  • @delalen8012
    @delalen8012 4 года назад +15

    Сегодня я узнал не только три способа, как сделать аккордеон, но и что такое аккордеон! Спасибо))

  • @sanjarkhannasibli6236
    @sanjarkhannasibli6236 4 года назад

    Здравствуйте. Сам из Баку. Сейчас изучаю JavaScript, HTML5 и CSS3, ваши уроки помогают в этом, очень полезные, спасибо! Очень приятно, как простой парень из Баку поднялся до таких высот, как IBM. Удачи вам!

  • @АндрейАлексеев-п1ц
    @АндрейАлексеев-п1ц 4 года назад +4

    Сделал как в видео - ничего не получилось. Странно

  • @aikkku
    @aikkku 4 года назад +7

    Так круто! Спасибо) Видосы интересные, как всегда❤️

  • @aleksandrkozowski9717
    @aleksandrkozowski9717 Год назад

    Полезное видео. Теперь знаю, как сделать каркас, осталось стилизовать по-своему)

  • @masterng56
    @masterng56 2 года назад +1

    Реально очень просто и полезно! Хорошо бы еще анимацию на раскрытие и закрытие аккордеона.

  • @okireev
    @okireev 4 года назад +1

    Отличные последние три видео. Всё подробно объясняете и мне очень нравятся видео про реализации базовых вещей на нативном js. 👍

  • @ЗапасЗнаний
    @ЗапасЗнаний 3 года назад

    Спасибо Виталий за пользу, которую вы несёте людям на этом канале.

  • @Polihut1
    @Polihut1 4 года назад +3

    Как обычно мега лайкосик за супер важную инфу и за то что очень в кассу 👍🏻😉

  • @checkTM
    @checkTM 3 года назад

    благодарность за видео) когда не часть делаешь аккордеон то местами забываешь, что да как) удачи

  • @akbarshoh9661
    @akbarshoh9661 4 года назад

    Кому как но мне нравиться как он объясняет и то что надо для новичков. Чтобы больше таких видосы

  • @alexbugg2167
    @alexbugg2167 4 года назад +1

    Спасибо огромное , давно ждал)красавчик🤘

    • @prosto_razrabotka
      @prosto_razrabotka  4 года назад +1

      Вот и дождался -)

    • @alexbugg2167
      @alexbugg2167 4 года назад

      Просто: разработка только вот вопрос, а как сделать его плавным выезжающим ?Буду благодарен за подсказку

  • @VasiliyKolpaxidis
    @VasiliyKolpaxidis 3 года назад

    Спасибо большое за полезную инфу. +1 подписчик
    Я вас видел в ИТ бороде поэтому и посмотрел. Лексу привет ))))))))

  • @MelkoR4111
    @MelkoR4111 3 года назад

    как же вы круто объясняете, вот бы у вас был курс по js

  • @prosto_razrabotka
    @prosto_razrabotka  4 года назад +7

    А какой Ваш аккордеон?)

    • @shifronim8950
      @shifronim8950 4 года назад

      А наш аккордеон порвался на свадьбе. Дежурная шутка юмора

    • @Giri-16108
      @Giri-16108 4 года назад

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

    • @trampsport
      @trampsport 4 года назад

      Виталий, вы можете примеры на код пен сохранять?

  • @priminister5711
    @priminister5711 3 года назад

    Блин, я вот думал как сделать аккардион, везде просто было косо, где-то криво, или непонятно, вас посмотрел как вы на html scss, сделали просто ахренел, честно.

  • @plaxa4094
    @plaxa4094 Год назад

    Большое спасибо за видео, максимально всё понятно.
    Единственное, что хотел узнать, а как лучше аккордеон писать, часто на css или на jQury, по сути разницы же нет в функциональном моменте (или ошибаюсь))?

  • @user-jd4vj2eg6m
    @user-jd4vj2eg6m 4 года назад

    Все просто и понятно....респект тебе Чувак

  • @luchiksolnca6039
    @luchiksolnca6039 2 года назад

    Захожу на твой канал перед походом в магазин за рубашками)

  • @МиржалолМирхомитов-г4о

    спасибо за урок

  • @Влад-Донцов
    @Влад-Донцов 4 года назад

    Спасибо мужик тебе за твои видео. Всё по бэму расписал и аккуратно так лайк

  • @elenaizmaylova9331
    @elenaizmaylova9331 2 года назад

    Спасибо огромное за видео!

  • @Redracer228
    @Redracer228 3 года назад

    Ты гений! Спасибо, помог с проектом!

  • @arinastepanova2810
    @arinastepanova2810 Год назад

    Добрый день! А в случае создания аккордеона на голом html и css можно сделать так, чтобы выпадали эти вкладки плавно/замедленно. Применяется ли transition к input radio? Если да, то подскажите пожалуйста как это сделать?🙏

  • @dennymaverick5472
    @dennymaverick5472 2 года назад

    Спасибо большое! Очень полезно!! 🧡

  • @МаксимПоляковський-э3н

    Большое тебе спасибо, учусь верстать по твоему каналу)

  • @АндрейГолованов-н1о
    @АндрейГолованов-н1о 4 года назад +2

    Как добавить плавности скрипту на чистом JS?

    • @priminister5711
      @priminister5711 3 года назад

      для классна сделай transition и для элемента

  • @dennymaverick5472
    @dennymaverick5472 2 года назад

    Здравствуйте! Скажите пожалуйста, как сделать, чтобы при нажатии на триггер, он оставался на месте? Когда контента на странице достаточно много, при нажатии на открывающий список, когда аккордеон сверху находится - еще норма, но когда аккордеон снизу страницы, - контент смещается вверх, и неудобно прокручивать к началу... Буду благодарен за Ваш ответ! ❤️❤️❤️

  • @kozlov1801
    @kozlov1801 4 года назад +3

    Круто!

  • @je_mappelle_serge
    @je_mappelle_serge 4 года назад +2

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

    • @MrAbad202
      @MrAbad202 3 года назад

      Придумал, как: берем контейнер, задаем ему высоту, допустим 100vh, внутри контейнера создаем враппер, задаем ему position: relative, height: 100%, и transition: height 500ms ease. Внутри враппера создаем див с контентом, ему задаем position: absolute, height: 100%, top: 0px, left: 0px. Потом создаем класс, который мы будем накладывать на враппер, через JS, который будет обозначать скрытый аккордеон, и ему задаем height: 0%

  • @KillerLewis73
    @KillerLewis73 3 года назад +1

    Полностью повторил у себя ваш код на jQuery, но ничего не работает, не могу понять, почему

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад

      Если догадаетесь прийти в тг чат с кодом, вам помогут.

  • @vladgur4931
    @vladgur4931 3 года назад

    можно реализовать аккордеон на css3 следующей структуры:

    Часть I

    1. Название страницы
    2. Название страницы
    3. Название страницы
    Глава 1

    4. Название страницы
    5. Название страницы
    6. Название страницы


    Глава 2

    7. Название страницы
    8. Название страницы
    9. Название страницы




    Часть II

    10. Название страницы
    11. Название страницы

  • @РоманРусак-ю5ы
    @РоманРусак-ю5ы 2 года назад

    Огонь, почему у тебя курса нет своего тока?))

  • @AlexZHIMuk
    @AlexZHIMuk 4 года назад +1

    Весчь! Спасеба, сохранил!

  • @boldureans
    @boldureans 4 года назад +1

    Ништяки подъехали

  • @OleksandBaranov
    @OleksandBaranov 4 года назад

    Виталий, спааасибо большое

  • @oleksiivovnenko4661
    @oleksiivovnenko4661 3 года назад

    Очень полезно, спасибо.

  • @tonit2237
    @tonit2237 4 года назад

    Лысый, как обычно, решает) Лайк) В Киев не будете приезжать с конференцией по вебу? Я б сходил)

  • @poring39
    @poring39 4 года назад

    очень полезное видео, спасибо!

  • @ВероникаЧернобай-ъ8л

    Круто мне помогло!

  • @Blade_Ruiner
    @Blade_Ruiner 2 года назад

    Спасибо. Но как все же оптимальнее? В чистом html или в js делать подобные вещи? (не только про аккордеон)

    • @stormbraker637
      @stormbraker637 2 года назад

      Css менее требовательный к цп, особенно на бюджетных телефонах

  • @romanchernyshov2632
    @romanchernyshov2632 Год назад

    Спасибо!

  • @klitorchuk_3478
    @klitorchuk_3478 4 года назад

    Очень хотелось бы увидеть от вас уроки по Vue js )

    • @prosto_razrabotka
      @prosto_razrabotka  4 года назад +2

      Скорее всего не дождётесь)) я из секты любителей Реакта)

  • @СашаКатков-ь6г
    @СашаКатков-ь6г 4 года назад

    Я начинающий, но если только html css, не прощу ли использовать

  • @dmitriyv5740
    @dmitriyv5740 Год назад

    Для аккордеона есть специальные хтмл теги. Это еще один простой способ.

  • @TheKirk1989
    @TheKirk1989 4 года назад

    Из всего выше перечисленного я с мог реализовать только подключение библиотеки JQuery

    • @andrewivan5423
      @andrewivan5423 4 года назад +1

      Уходите от jQuery его время прошло

  • @tbb134
    @tbb134 3 года назад

    Thanks for video Bro

  • @dasvas9383
    @dasvas9383 4 года назад

    ты забыл прописать cursor: pointer для дива по которому надо кликать - в сафари это работать не будет

  • @АртурРахматов-г4ъ
    @АртурРахматов-г4ъ 4 года назад

    Спасибо)

  • @Dmitriyシ
    @Dmitriyシ 4 года назад

    Почему используешь scss а не sass?

    • @prosto_razrabotka
      @prosto_razrabotka  4 года назад +1

      Потому что сасс... как бы это сказать... в общем, не могу подобрать цензурные слова, которые могут описать мои чувства по отношению к сасс -)

    • @Dmitriyシ
      @Dmitriyシ 4 года назад

      @@prosto_razrabotka он же проще, нет точек с запятой, скобок, меньше возможности ошибится, откуда такое отношение?

    • @prosto_razrabotka
      @prosto_razrabotka  4 года назад +1

      Вот именно из-за отсутствия всего вышеперечисленного возможность ошибиться куда БОЛЬШЕ!

  • @Sports-bo9lc
    @Sports-bo9lc 2 года назад

    Надеюсь автор читает коменты. Как сделать плавное появление?

  • @strelok6903
    @strelok6903 4 года назад

    А что это[~]значит?? Для чего нужен ?

  • @vance8459
    @vance8459 4 года назад

    От разработки не только на голове облысел, но и на бороде и бровях

  • @ОлександрЛаска
    @ОлександрЛаска Год назад

    Казалось бы - логично объяснить в чем особенность, если пишешь двухуровневый аккордеон, но нет...

  • @ИльяТкаченко-х6й
    @ИльяТкаченко-х6й 4 года назад

    Мой аккардеон на jquery в 2 строки)

  • @mykolachornyi6773
    @mykolachornyi6773 3 года назад

    Нужен аккордеон в аккордеоне)

  • @azarmi6065
    @azarmi6065 4 года назад +1

    Привет

  • @БьорнСтрауструп
    @БьорнСтрауструп 4 года назад

    Lukas

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

    +

  • @horlonangel
    @horlonangel 4 года назад

    Что тут крутого? Это же язык оформления. Навыдумывали всякого говна. Это как к молотку приделать микроскоп и кричать: смотрите! Я при помощи молотка рассматриваю микробов... Тфу бл*, аж тошнит.