Как добавить аккордеон со знаком плюс в Bootstrap 5 с помощью CSS

Чтобы добавить аккордеон со знаком плюса в Bootstrap 5 с помощью CSS, вы можете использовать несколько методов. Вот несколько подходов:

Метод 1: использование компонента Collapse в Bootstrap
Bootstrap 5 предоставляет компонент Collapse, который можно настроить для отображения знака плюса. Вы можете использовать следующий код:

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">
        <span class="accordion-plus">+</span> Accordion Heading
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Accordion content goes here.
      </div>
    </div>
  </div>
</div>

CSS:

‘+’;
отображение: inline-block;
поле вправо: 5 пикселей;
переход: преобразование 0,3 с;
}
.accordion-button[aria-expanded= ”true”].accordion-plus::before {
Transform: Rotate(45deg);

Метод 2: использование пользовательского CSS
Если вы предпочитаете добавить знак плюса с помощью собственного CSS, вы можете использовать следующий код:

HTML:

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <span class="accordion-plus">+</span> Accordion Heading
      </button>
    </h2>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
      <div class="accordion-body">
        Accordion content goes here.
      </div>
    </div>
  </div>
</div>

CSS:

‘+’;
отображение: inline-block;
поле вправо: 5 пикселей;
переход: преобразование 0,3 с;
}
.accordion-button[aria-expanded= ”true”].accordion-plus::before {
Transform: Rotate(45deg);

Обратите внимание, что оба метода предполагают, что вы включили в свой проект необходимые файлы CSS и JavaScript Bootstrap 5.