Колонка складная для кнопки на мобильном телефоне

У меня есть страница с 2 столбцами, и я хочу, чтобы на маленьких экранах первый столбец заменялся небольшим столбцом с одной кнопкой. Когда вы нажимаете кнопку, оригинальный первый столбец появляется снова (как, например, в Wordpress).

Спасибо.

Источник

1 ответ

Решение

Вы не можете уменьшить столбец до кнопки на точке останова (без добавления большого количества кода), но вы можете:

  • Добавить новый столбец с class="column small-12 hide-for-medium"и поместите кнопку там... это будет держать столбец скрытым от среднего вверх.
  • Складной столбец (первый) будет иметь класс hide-for-small-only, так что это будет скрыто на небольшой точке останова; пожалуйста, добавьте идентификатор в этот столбец.
  • Используя jQuery, по нажатию кнопки скрыть / показать первый столбец (тот, который с идентификатором, вы должны использовать slideToggle() from jQuery), и это все.

Надеюсь это поможет.

Источник
Другие вопросы по тегам