Вертикальный аккордеон для фотографий

Для реализации этого аккордеона, который на малых экранах переходит в табы, используется небольшой код на JavaScript.

Пример:

Ada Wong
Senua
Aloy
Lara Croft
Bayonetta

HTML:

Первая панель с фотографией имеет дополнительный класс active.

CSS:

В зависимости от ширины контейнера или количества фотографий, CSS-код возможно придется корректировать.

JS:

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Ataman:

    А возможно как то сделать, что бы и мобильный вид был такой же?

    Ответить
    • Alexander:

      Удалите стили:

      @media screen and (max-width: 480px) {
         …
      }

      Но мне кажется не уместится

      Ответить
      • Ataman:

        В мобильном виде не отображается главное изображение

        ссылка

        В чем может быть проблема? И еще вопрос. JS код куда прописывать?

        Ответить
        • Alexander:

          Добавьте сюда:

          .panel-container {
             position: relative;
             z-index: 10;
          }
          Ответить
  • Max:

    Спасибо большое. взял себе на блог)))

    Ответить