Спойлер на чистом JavaScript и CSS

Анимированный спойлер на JavaScript и CSS

Долгое время я искал достаточно простой и понятный для меня анимированный спойлер плавно скрывающий текст. Мне хотелось найти решение без использования дополнительных библиотек или плагинов для WordPress, хотя ниже я приведу пример с использованием jQuery для сравнения. Для меня решением стало совместное использование transition свойства CSS и изменения высоты элемента с помощью JavaScript. Спойлер подстраивается под высоту текста с помощью scrollHeight.

В песочнице sololearn. Открыть .

Лермонтов М.Ю. — Родина

        Люблю отчизну я, но странною любовью!
        Не победит ее рассудок мой.
        Ни слава, купленная кровью,
      Ни полный гордого доверия покой,
      Ни темной старины заветные преданья
      Не шевелят во мне отрадного мечтанья,
        Но я люблю — за что, не знаю сам —
        Ее степей холодное молчанье,
        Ее лесов безбрежных колыханье,
      Разливы рек ее, подобные морям;
      Проселочным путем люблю скакать в телеге
      И, взором медленным пронзая ночи тень,
      Встречать по сторонам, вздыхая о ночлеге,
      Дрожащие огни печальных деревень.
        Люблю дымок спаленной жнивы,
        В степи ночующий обоз
        И на холме средь желтой нивы
        Чету белеющих берез.
        С отрадой, многим незнакомой,
        Я вижу полное гумно,
        Избу, покрытую соломой,
        С резными ставнями окно;
        И в праздник, вечером росистым,
        Смотреть до полночи готов
        На пляску с топаньем и свистом
        Под говор пьяных мужичков.
            

Пример на jQuery в sololearn. Открыть .

One Response to “Спойлер на чистом JavaScript и CSS

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *