Bootstrap Collapse

Переключайте видимость контента в вашем проекте с помощью нескольких классов и наших плагинов JavaScript.

Что такое Collapse?

Collapse — это JavaScript-плагин, который позволяет скрывать и отображать содержимое. Вы можете использовать его для создания аккордеонов, выпадающих списков, меню и других интерактивных элементов.

Как это устроено

Когда вы кликаете на кнопку или ссылку, связанную с элементом Collapse, содержимое этого элемента анимированно скрывается или отображается. При анимации высота элемента изменяется от текущего значения до 0. Обратите внимание, что нельзя использовать отступы (padding) на элементе с классом .collapse. Вместо этого используйте класс как независимый обертывающий элемент.

Эффект анимации этого компонента зависит от медиа-запроса prefers-reduced-motion. См. раздел с уменьшенным движением в документации по специальным возможностям .

Пример

Рассмотрим пример использования Collapse. Ниже находятся кнопки, которые позволяют показать и скрыть другой элемент:

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Показать с помощью ссылки
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Показать с помощью кнопки
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Здесь находится некоторое заполнительное содержимое для компонента Collapse. Этот панель по умолчанию скрыта, но она будет показана, когда пользователь активирует соответствующий триггер.
  </div>
</div>

Результат:

Показать с помощью ссылки

Здесь находится некоторое заполнительное содержимое для компонента Collapse. Этот панель по умолчанию скрыта, но она будет показана, когда пользователь активирует соответствующий триггер.

Небольшой обзор классов:

.collapse скрывает контент
.collapsing применяется во время переходов
.collapse.show показывает содержание

Вы можете использовать ссылку с href атрибутом или кнопку с data-target атрибутом. В обоих случаях требуется data-toggle="collapse".

Множественные цели

Вы также можете использовать Collapse для одновременного скрытия и отображения нескольких элементов. Например:

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">
    Первый элемент
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">
    Второй элемент
  </button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">
    Показать оба элемента
  </button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Здесь находится заполнительное содержимое для первого компонента Collapse в этом примере с множественными элементами.
      </div>
    </div>
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Здесь находится заполнительное содержимое для второго компонента Collapse в этом примере с множественными элементами.
      </div>
    </div>
  </div>
</div>

Результат:

Первый элемент

Здесь находится заполнительное содержимое для первого компонента Collapse в этом примере с множественными элементами.

Здесь находится заполнительное содержимое для второго компонента Collapse в этом примере с множественными элементами.

Горизонтальный

Плагин collapse поддерживает горизонтальное сворачивание. Добавьте класс-модификатор .collapse-horizontal для перехода width вместо height и установите width для непосредственного дочернего элемента. Не стесняйтесь писать свой собственный пользовательский Sass, использовать встроенные стили или используйте утилиты width.

Пожалуйста, обратите внимание, что, хотя в приведенном ниже примере есть min-height параметр, позволяющий избегать чрезмерного перерисовывания в наших документах, явно это не требуется. Требуется только width для дочернего элемента.

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Переключить свертывание ширины
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      Это некоторый заполнитель для горизонтального свертывания. По умолчанию он скрыт и отображается при срабатывании.
    </div>
  </div>
</div>

Результат:

Это некоторый заполнитель для горизонтального свертывания. По умолчанию он скрыт и отображается при срабатывании.

Доступность

Обязательно добавьте aria-expanded в элемент управления. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-expanded="false". Если вы установили открываемый складной элемент по умолчанию с помощью show класса, установите aria-expanded="true" вместо этого элемент управления. Плагин автоматически переключит этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также связанный с тем же складным элементом). Если элемент HTML элемента управления не является кнопкой (например, <a> или <div>), атрибут role="button" следует добавить к элементу.

Если ваш элемент управления нацелен на один сворачиваемый элемент - т.е. Атрибут data-target указывает на id селектор - вы должны добавить aria-controls атрибут к элементу управления, содержащему id сворачиваемый элемент. Современные программы чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому сворачиваемому элементу.

Обратите внимание, что текущая реализация Bootstrap не охватывает различные дополнительные взаимодействия с клавиатурой, описанные в шаблоне аккордеона WAI-ARIA Authoring Practices 1.1 - вам нужно будет включить их самостоятельно с помощью пользовательского JavaScript.

CSS

Переменные Sass

scss/_variables.scss

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Классы

Классы перехода к свертыванию можно найти в scss/_transitions.scss поскольку они являются общими для нескольких компонентов (collapse и accordion).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Использование

Плагин collapse использует несколько классов для выполнения тяжелой работы:

.collapse скрывает содержимое
.collapse.show показывает содержимое
.collapsing добавляется при запуске перехода и удаляется при его завершении

Эти классы можно найти в _transitions.scss.

С помощью атрибутов данных

Просто добавьте data-bs-toggle="collapse" и a data-bs-target к элементу, чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. data-bs-target Атрибут принимает CSS-селектор для применения сворачивания. Обязательно добавьте класс collapse к сворачиваемому элементу. Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show.

Чтобы добавить управление группами в виде аккордеона в сворачиваемую область, добавьте атрибут data data-bs-parent="#selector". Обратитесь к странице accordion для получения дополнительной информации.

С помощью JavaScript

Включить вручную с помощью:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Опции

Поскольку параметры могут передаваться через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". При передаче параметров через атрибуты данных обязательно измените тип регистра имени опции с “camelCase” на “kebab-case”. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap версии 5.2.0, все компоненты поддерживают экспериментальный атрибут зарезервированных данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", конечным title значением будет 456, а отдельные атрибуты данных будут переопределять значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Конечный объект конфигурации является объединенным результатом data-bs-config, data-bs-, и js object где последнее заданное значение ключа переопределяет остальные.

Имя	Тип	По умолчанию	Описание
`parent`	селектор, элемент DOM	`null`	Если указан parent , то все сворачиваемые элементы под указанным parent будут закрыты при отображении этого сворачиваемого элемента. (аналогично традиционному поведению accordion - это зависит от `card` класса). Атрибут должен быть установлен в целевой сворачиваемой области.
`toggle`	логическое значение	`true`	Переключает сворачиваемый элемент при вызове.

Методы

Все методы API являются асинхронными и запускают переход. Они возвращаются вызывающей стороне, как только начинается переход, но до его завершения. Кроме того, вызов метода в компоненте перехода будет игнорироваться. Узнайте больше в наших документах по JavaScript.

Активирует содержимое как сворачиваемый элемент. Принимает необязательные параметры object.

Вы можете создать экземпляр collapse с помощью конструктора, например:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Метод	Описание
`dispose`	Разрушает сворачивание элемента. (Удаляет сохраненные данные в элементе DOM)
`getInstance`	Статический метод, который позволяет вам получить экземпляр collapse, связанный с элементом DOM, вы можете использовать его следующим образом: `bootstrap.Collapse.getInstance(element)`.
`getOrCreateInstance`	Статический метод, который возвращает экземпляр collapse, связанный с элементом DOM, или создает новый экземпляр, если он не был инициализирован. Вы можете использовать его следующим образом: `bootstrap.Collapse.getOrCreateInstance(element)`.
`hide`	Скрывает сворачиваемый элемент. Возвращается вызывающей стороне до того, как сворачиваемый элемент был фактически скрыт (например, до того, как произошло `hidden.bs.collapse` событие).
`show`	Показывает сворачиваемый элемент. Возвращается вызывающей стороне до фактического отображения сворачиваемого элемента (например, до того, как произойдет `shown.bs.collapse` событие).
`toggle`	Переключает сворачиваемый элемент в положение "Показано" или "скрыто". Возвращается вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт (т.е. До того, как произойдет событие `shown.bs.collapse` or `hidden.bs.collapse`).

Мероприятия

Класс сворачивания Bootstrap предоставляет несколько событий для подключения к функциональности сворачивания.

Тип события	Описание
`hide.bs.collapse`	Это событие запускается немедленно при вызове `hide` метода.
`hidden.bs.collapse`	Это событие запускается, когда элемент collapse скрыт от пользователя (будет ждать завершения CSS-переходов).
`show.bs.collapse`	Это событие срабатывает немедленно при вызове `show` метода экземпляра.
`shown.bs.collapse`	Это событие запускается, когда элемент collapse становится видимым для пользователя (будет ждать завершения CSS-переходов).

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})

FAQ

Как использовать Collapse в своем проекте?
Ответ: Для использования Collapse, добавьте элемент с классом .collapse и укажите триггер (кнопку или ссылку), который будет управлять его состоянием.
Как анимировать скрытие и отображение элемента Collapse?
Ответ: При клике на триггер, содержимое элемента Collapse анимированно меняет высоту от текущего значения до 0, что создает плавное скрытие или отображение.
Можно ли использовать отступы на элементе с классом .collapse?
Ответ: Нет, отступы (padding) не рекомендуется использовать на элементе с классом .collapse. Вместо этого используйте обертывающий элемент для стилизации.
Как создать множественные Collapse на одной странице?
Ответ: Добавьте разные идентификаторы (ID) для каждого элемента Collapse и укажите соответствующие триггеры для их управления.
Какие события можно отслеживать при использовании Collapse?
Ответ: Вы можете отслеживать события show.bs.collapse (при открытии), shown.bs.collapse (после открытия), hide.bs.collapse (при закрытии) и hidden.bs.collapse (после закрытия).
Как стилизовать элемент Collapse?
Ответ: Вы можете применять стили к элементам Collapse, таким как цвет фона, шрифт и границы, используя классы Bootstrap или свои собственные стили.
Какие альтернативы компоненту Collapse в Bootstrap?
Ответ: Другие фреймворки также предоставляют подобные компоненты, например, Accordion в Foundation или Collapse в Materialize.
Какие браузеры поддерживают компонент Collapse?
Ответ: Компонент Collapse поддерживается в современных браузерах, включая Chrome, Firefox, Safari и Edge.
Какие лучшие практики при использовании Collapse?
Ответ: Используйте Collapse для улучшения пользовательского опыта, но не перегружайте страницу большим количеством скрытых элементов. Также следите за доступностью для пользователей с ограниченными возможностями.

Заключение

Компонент Collapse — это мощный инструмент для создания интерактивных элементов на вашем сайте. Используйте его с умом, чтобы улучшить пользовательский опыт и сделать ваш веб-интерфейс более динамичным. Надеюсь, что данная статья поможет вам успешно внедрить Collapse в ваши проекты и сделать их более функциональными и удобными для пользователей. Удачи в разработке! ?

На этой странице