Аккордеон

Создавайте вертикально сворачивающиеся аккордеоны в сочетании с нашим плагином Collapse на JavaScript.

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

Как это работает

Аккордеон использует внутренний collapse чтобы сделать его раскладным. Для отображения развернутого аккордеона, добавьте класс .open в .accordion.

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

Пример

Щелкните аккордеоны ниже, чтобы развернуть/свернуть содержимое аккордеона.

Это тело аккордеона первого элемента. По умолчанию оно скрыто, пока плагин сворачивания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в .accordion-body, хотя переход ограничивает переполнение.

Это тело аккордеона второго элемента. По умолчанию он скрыт, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в .accordion-body, хотя переход ограничивает переполнение.

Это тело аккордеона третьего элемента. По умолчанию оно скрыто, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в .accordion-body, хотя переход ограничивает переполнение.

<divclass="accordion"id="accordionExample"><divclass="accordion-item"><h2class="accordion-header"id="headingOne"><buttonclass="accordion-button"type="button"data-bs-toggle="collapse"data-bs-target="#collapseOne"aria-expanded="true"aria-controls="collapseOne"> Элемент аккордеона #1 </button></h2><divid="collapseOne"class="accordion-collapse collapse show"aria-labelledby="headingOne"data-bs-parent="#accordionExample"><divclass="accordion-body"><strong>Это тело аккордеона первого элемента.</strong> По умолчанию оно скрыто, пока плагин сворачивания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение. </div></div></div><divclass="accordion-item"><h2class="accordion-header"id="headingTwo"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo"> Элемент аккордеона #2 </button></h2><divid="collapseTwo"class="accordion-collapse collapse"aria-labelledby="headingTwo"data-bs-parent="#accordionExample"><divclass="accordion-body"><strong>Это тело аккордеона второго элемента.</strong> По умолчанию он скрыт, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение. </div></div></div><divclass="accordion-item"><h2class="accordion-header"id="headingThree"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#collapseThree"aria-expanded="false"aria-controls="collapseThree"> Элемент аккордеона #3 </button></h2><divid="collapseThree"class="accordion-collapse collapse"aria-labelledby="headingThree"data-bs-parent="#accordionExample"><divclass="accordion-body"><strong>Это тело аккордеона третьего элемента.</strong> По умолчанию оно скрыто, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение. </div></div></div></div>

Заполнение

Добавьте .accordion-flush для удаления по умолчанию цвета фона, некоторых границ и некоторых закругленных углов и рендеринга аккордеона от края до края в пределах его родительского контейнера.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

<divclass="accordion accordion-flush"id="accordionFlushExample"><divclass="accordion-item"><h2class="accordion-header"id="flush-headingOne"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseOne"aria-expanded="false"aria-controls="flush-collapseOne"> Элемент аккордеона #1 </button></h2><divid="flush-collapseOne"class="accordion-collapse collapse"aria-labelledby="flush-headingOne"data-bs-parent="#accordionFlushExample"><divclass="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div></div></div><divclass="accordion-item"><h2class="accordion-header"id="flush-headingTwo"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseTwo"aria-expanded="false"aria-controls="flush-collapseTwo"> Элемент аккордеона #2 </button></h2><divid="flush-collapseTwo"class="accordion-collapse collapse"aria-labelledby="flush-headingTwo"data-bs-parent="#accordionFlushExample"><divclass="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div></div></div><divclass="accordion-item"><h2class="accordion-header"id="flush-headingThree"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseThree"aria-expanded="false"aria-controls="flush-collapseThree"> Элемент аккордеона #3 </button></h2><divid="flush-collapseThree"class="accordion-collapse collapse"aria-labelledby="flush-headingThree"data-bs-parent="#accordionFlushExample"><divclass="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div></div></div></div>

Всегда открыт

Опустите атрибут data-bs-parent в каждом файле .accordion-collapse, чтобы элементы аккордеона оставались открытыми при открытии другого элемента.

Это тело аккордеона первого элемента. Оно отображается по умолчанию, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в .accordion-body, хотя переход ограничивает переполнение.

Это тело аккордеона третьего элемента. По умолчанию он скрыт, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в .accordion-body, хотя переход ограничивает переполнение.

<divclass="accordion"id="accordionPanelsStayOpenExample"><divclass="accordion-item"><h2class="accordion-header"id="panelsStayOpen-headingOne"><buttonclass="accordion-button"type="button"data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseOne"aria-expanded="true"aria-controls="panelsStayOpen-collapseOne"> Аккордеонный элемент #1 </button></h2><divid="panelsStayOpen-collapseOne"class="accordion-collapse collapse show"aria-labelledby="panelsStayOpen-headingOne"><divclass="accordion-body"><strong>Это тело аккордеона первого элемента.</strong> Оно отображается по умолчанию, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение. </div></div></div><divclass="accordion-item"><h2class="accordion-header"id="panelsStayOpen-headingTwo"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseTwo"aria-expanded="false"aria-controls="panelsStayOpen-collapseTwo"> Аккордеонный элемент #2 </button></h2><divid="panelsStayOpen-collapseTwo"class="accordion-collapse collapse"aria-labelledby="panelsStayOpen-headingTwo"><divclass="accordion-body"><strong>Это тело аккордеона второго элемента.</strong> По умолчанию он скрыт, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение. </div></div></div><divclass="accordion-item"><h2class="accordion-header"id="panelsStayOpen-headingThree"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseThree"aria-expanded="false"aria-controls="panelsStayOpen-collapseThree"> Аккордеонный элемент #3 </button></h2><divid="panelsStayOpen-collapseThree"class="accordion-collapse collapse"aria-labelledby="panelsStayOpen-headingThree"><divclass="accordion-body"><strong>Это тело аккордеона третьего элемента.</strong> По умолчанию он скрыт, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение. </div></div></div></div>

Доступность

Пожалуйста, прочтите раздел о специальных возможностях по доступности для получения дополнительной информации.

Sass

Переменные

$accordion-padding-y:1rem;$accordion-padding-x:1.25rem;$accordion-color:$body-color;$accordion-bg:$body-bg;$accordion-border-width:$border-width;$accordion-border-color:rgba($black,.125);$accordion-border-radius:$border-radius;$accordion-inner-border-radius:subtract($accordion-border-radius,$accordion-border-width);$accordion-body-padding-y:$accordion-padding-y;$accordion-body-padding-x:$accordion-padding-x;$accordion-button-padding-y:$accordion-padding-y;$accordion-button-padding-x:$accordion-padding-x;$accordion-button-color:$accordion-color;$accordion-button-bg:$accordion-bg;$accordion-transition:$btn-transition,border-radius.15sease;$accordion-button-active-bg:tint-color($component-active-bg,90%);$accordion-button-active-color:shade-color($primary,10%);$accordion-button-focus-border-color:$input-focus-border-color;$accordion-button-focus-box-shadow:$btn-focus-box-shadow;$accordion-icon-width:1.25rem;$accordion-icon-color:$accordion-color;$accordion-icon-active-color:$accordion-button-active-color;$accordion-icon-transition:transform.2sease-in-out;$accordion-icon-transform:rotate(-180deg);$accordion-button-icon:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");$accordion-button-active-icon:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");