Updated my "FAQ" Accordion for Bootstrap 5

Showcase
1

Now available in the online library is an updated version of my Bootstrap 4.x Ultimate Accordion with caret icon. The new component is called Ultimate Accordion with arrow icon, and it works with Bootstrap 5.x. It’s the same basic design as the old one… sort of an FAQ accordion. I did replace the standard Bootstrap “line” arrow with a solid triangle SVG image. The component looks like this…

image
image757×323 9.77 KB

4 Likes
2

Thanks printninja just used this in a project.
May I ask how you achieve the arrow rotate animation?
Is it transition: transform .2s ease-in-out; in the style sheet?

1 Like
3

The transition rule governs the speed at which the arrow turns. The class that controls the rotation is this one…

.accordion-button:not(.collapsed)::after {
  background-image: url("arrow.svg");
  transform: rotate(-180deg);
}

In my CSS file, it should be the very next class after the one that contains the transition you posted. The transform rule is what governs the rotation.

If you prefer a different effect, say you want the arrow to flip instead of rotate, you could use…

transform: rotateX(180deg);

And maybe slow down the transition to .4s so you can see it flip more easily.

1 Like