Hi,
is it possible to use a Bootstrap Accordion and use a + symbol and when open the Accordion it changes into a X Symbol.
I know there are a few solutions bei @Eldar or others. But in these solutions it is not a typical Accordion. Because it open all tabs you click and in the Accordion when click a new one the other close …
Thanks
Just overwrite the icon with CSS.
Hi @Jannis
thank you for your answer. But the problem is that I dont know how to add a icon … It’s an Accordion Container with Cards inside. But I can’t choose the Card with closing icon. When I use a Card outside the Accordion Container I can choose that I need a closing icon … but not inside the Accordion container.
So … how I get there an Icon ?
When you have a look with development tools you’ll see that the icon is applied via CSS.
oh … now I understand. Thanks
I thought only do the animation with CSS
thanks
I tried to use ChatGPT therefore:
Input:
Is it possible to change in a Bootstrap 5 Accordion the icons? The closed accordion icon should be a + symbol and open accordion icon should be a X symbol.
Answer:
Yes, it’s totally possible to customize the icons in a Bootstrap 5 Accordion to show a + when closed and an × (X) when open. Bootstrap doesn’t provide built-in icon toggles, but you can easily achieve this with a bit of custom CSS and a small JavaScript tweak.
This method uses the ::after pseudo-element on the .accordion-button to toggle icons.
HTML Example<div class="accordion" id="myAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#myAccordion">
<div class="accordion-body">
This is the first item's accordion body.
</div>
</div>
</div>
</div>
.accordion-button::after {
content: '+';
font-size: 1.25rem;
transform: none;
}
.accordion-button:not(.collapsed)::after {
content: '×';
}
Notes:content property of the ::after pseudo-element..collapsed class is automatically added or removed by Bootstrap based on the accordion state.I didn’t double check the above CSS 
ok, cool … I give it a try. But what I don’t understand is … the standard Bootstrap Accordion use an Arrow - and when open the Arrow change the direction with a smooth rotation. Why is this not default when I use a accordion in blocs app @Norm
Is there a way to implement this in a future update ?
Hey… tried it but doesn’t work… maybe anybody else has done this before ? Or the Accordion with the standard Arrow symbol ? Thanks Jannis for ur help …
Compare the markup from the bootstrap docs with the markup blocs users and you will see the answer there 
.
You can then enable the chevrons that are native to bootstrap or modify it as @Jannis shows above. You can even add customs SVGs to that CSS.
Hi @PeteSharp
My English is not so good that I understand what you mean. I don’t know what you mean with markup or enable chevrons …
But anyway - thanks for your answer.
tom
Me neither.
You’re not alone.
Maybe one day its possible to have a Accordion with an open and closing icon
At the moment I use the FAQ Widget by Elfsight. That’s perfect …
But hope that Blocsapp do this Accordion also. Or someone in the Forum do an example Project - so it’s easier to learn how it works.
Hi @tom2,
If no one else in the forum does that in the next few days, I’ll create a sample project and share it after I complete an urgent freelance project I’m currently working on.
Cheers,
Eldar
Hi @Eldar
thank you very much. 
cheers
tom
Thank you Eldar. 
The markup is the HTML code. You will see the way Bootstrap creates the accordions is different to Blocs. But you can use the same classes. Learning some of these basics helps develop problem solving skills.
Add .accordion to the main container
Add .accordion-button to the link of the item header
You need to remove padding from the card header. You can just use the class .p-0 like in this example.
Here is a basic example that took less than a min to make.
Basic_Accordion__example.bloc (25.1 KB)
Another great help from Pete
Thanks a lot.
I did with your example. 
As simple as can be.
The Blocs accordion, only one class and the CSS from Jannis.
FAQ.bloc (26.1 KB)
Hey @PeteSharp and @Bootsie
thats cool. Thanks for your help
cheers
tom
