Аккордеон

<divclass="accordion"id="accordionExample"><divclass="accordion-item"><h2class="accordion-header"><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"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"><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"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"><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"data-bs-parent="#accordionExample"><divclass="accordion-body"><strong>Это тело аккордеона третьего элемента.</strong> По умолчанию оно скрыто, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение.
</div></div></div></div>

<divclass="accordion accordion-flush"id="accordionFlushExample"><divclass="accordion-item"><h2class="accordion-header"><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"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"><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"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"><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"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>

<divclass="accordion"id="accordionPanelsStayOpenExample"><divclass="accordion-item"><h2class="accordion-header"><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"><divclass="accordion-body"><strong>Это тело аккордеона первого элемента.</strong> Оно отображается по умолчанию, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение.
</div></div></div><divclass="accordion-item"><h2class="accordion-header"><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"><divclass="accordion-body"><strong>Это тело аккордеона второго элемента.</strong> По умолчанию он скрыт, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение.
</div></div></div><divclass="accordion-item"><h2class="accordion-header"><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"><divclass="accordion-body"><strong>Это тело аккордеона третьего элемента.</strong> По умолчанию он скрыт, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение.
</div></div></div></div>