В материалах нашего сайта, Bootstrap 5 Accordion применяется для скрытия некоторого контента, чтобы уменьшить размер просматриваемой страницы.

 

Bootstrap 5 Accordion — это неотъемлемая часть современной веб-разработки, которая позволяет пользователям организовывать и представлять контент в структурированном и интуитивно понятном виде.

Для этого просто используйте системное расширение Bootstrap 5.

 

В Joomla 5 применяется шаблон Cassiopeia для внешнего интерфейса, построенный на фреймворке Bootstrap 5.

 

Складные элементы полезны, когда вы хотите скрыть и показать большое количество контента.

 

Пример складных элементов:

 

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

 

Объяснение примера

В нашем примере - Первый аккордеон всегда открыт

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

Класс .collapse указывает сворачиваемый элемент (в нашем примере <div>).

Это контент, который будет отображаться или скрываться одним нажатием кнопки

Чтобы контролировать (показывать/скрывать) сворачиваемое содержимое, добавьте атрибут data-bs-toggle="collapse" к элементу <button>.

Затем добавьте data-bs-target="#id" атрибут для соединения кнопки со сворачиваемым содержимым [<div id="collapse1-2-3">].

 

Чтобы первый элемент не разворачивался, надо в теге <button> добавить класс collapsed.

А в контейнере div убрать класс show.

 


Было: 
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">

Стало:
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">

 

Примечание: По умолчанию сворачиваемое 2-е и 3-е содержимое - скрыто. Однако вы можете добавить .show - класс для отображения содержимого по умолчанию.

 

HTML- код контента системного Bootstrap 5 Accordion с открытым первым элементом

 

В материале используется быстрый и удобный web-метод копирования кода:
В блоке <pre>, где отображается HTML-код — встроена кнопка для копирования этого кода. При нажатии, — код выделяется и автоматически копируется в буфер обмена.

 



<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

 

 

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