Accordion Bootstrap 5

Does anyone know if and how this nice accordion with toggle indicators can be used in Blocs by now?
May be with the latest Beta which supports the release of BS 5.
Thanks fox :pray:

1 Like

Good post. I would like to have these nice touches now on some of my sites, hopefully these can be brought into Blocs by @Norm - like an option box to have the indicators active on click or static.

You can implement these pretty easily.

Select the link in the accordion.
Screenshot 2021-05-10 at 10.06.39

Add the class accordion-button to the link.

Screenshot 2021-05-10 at 10.10.17

Select the card header

and apply a Bootstrap utility class p-0 to remove padding for card heading.

Screenshot 2021-05-10 at 10.12.13

Rinse and repeat for all accordion links.

1 Like

Hi Norm - nice one ! so this changes from arrow up and down etc.
I guess in the class settings I can change the icon too?

At the moment I create a little down icon after my text like the image attached, works nice.

You would need to familiarise yourself with how the arrows are implemented via the accordion-button class in order to style further.

1 Like

Nice, one step further - Thanks @Norm :+1:

But for the styling of the icon and the blue collapsed I cannot understand how to come closer.

Bildschirmfoto 2021-05-10 um 12.05.03 Bildschirmfoto 2021-05-10 um 12.05.14
Oki, for the time beeing - super!

Let´s wait for hints of the “Super Users” :rofl:

1 Like

Well you could add something like below to the page header to style the arrow:

.accordion-button {
	background: unset!important;
.accordion-item {
	background: unset!important;
.accordion-button:not(.collapsed) {
	background: unset;
	box-shadow: unset;
	color: black;


The result will be:


Super @Jerry, another step forward only the arrows will stick in blue, black and slim.

Anyhow, not bad for the first day with the new beta :rofl: :+1: :+1: :+1:

End of Story for “Non Coders” … :upside_down_face:

I’m also a non-coder, but I guess you could try to ad some CSS for color etc. into the classes as Jerry did in the class “.accordion-button:not(.collapsed)”.
Try and error… first I would try this:

.accordion-button {
background: unset!important;
color: red;

if the normal arrow then is red instead of blue, you should be on the right way.

Edit: it’s not working! :see_no_evil:

1 Like

:+1:Das Versuch ich dann auch mal.

Krieg ich nicht hin, ok, erstmal müssen wohl die alten Accordens noch hinhalten :rofl: :upside_down_face: :sweat_smile: :joy:

ich werds bei Gelegenheit mal probieren. Habe leider aber nur selten Zeit für solche spassigen Sachen, deshalb bitte keine hohen Erwartungen :slight_smile:

Merci mein Freund :+1:

Bei mir erstmal auch hintendran.

Schönes WE und bleib gesund :four_leaf_clover:

Hi @Norm

For some reason I cant get this to work anymore? has anything changed…?

Hi @Jerry

I used to use what Norm posted a while back and used your brilliant code to style too but for some reason it’s not working anymore?

Do you know what’s changed? - I’ll keep plugging away and dive deeper…unless i’m doing it wrong!

Just need an arrow up and down when open / close.


Just add the class .accordion to the accordion and further follow all steps as above mentioned.

Small Potato Ltd 04-07-2023 at 11.58

1 Like

Hi @Jerry

Thank you - I just tried this on a new project and it worked ! Thank you.

But one an old project its not working - I think I have a conflict in accordion classes etc - so I will remove them and rebuild using what you have said.

Thanks again as always…hope the weather in your beautiful island is still as nice as ever. We had sun 2 weeks ago…I got the fans out of the loft and its been cold and rained since!!!

One problem I can’t seem to shake off is once I have applied the classes, is on opening the page the top (1st) icon is pointing up in blue suggesting that its open, yet I have told the accordion in Blocs set to not have any open. It’s just the blue arrow saying it’s open.

@Norm - Seems to be a conflict in what Boostrap is asking and when I check the tick on blocs. Only way is to keep the 1st one open I guess.

You must have applied .collapsed somewhere.

Small Potato Ltd 04-07-2023 at 14.39

1 Like