Чтобы добавить аккордеон со знаком плюса в 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.