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:

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

</style>

The result will be:

3 Likes

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: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: