Ideas for dynamic opened/closed accordion marks

First of all thanks to the authors for this neat little Gutenberg accordions plugin!
If you have Font Awesome available on your WP site, you might like to add the following code to your style-sheet to get a little animation upon opening/closing your accordion blocks. I have also moved the marks from “after” to “before”, as I find it more ergonomic.
You can view the result at the bottom of the “apple a day etc.” page of my gardening blog referenced above.

.c-accordion__title {
	padding-left: 1em;
}
.c-accordion__title:after,
.is-open>.c-accordion__title::after {
	content: '';
}
.c-accordion__title:before {
	font-family: 'Font Awesome 5 Free';
  content: '\f105';
  font-weight: bold;
  color: gray;
  transition: all 200ms ease 0s;
  position: absolute;
  left: 2px; 
}
.is-open>.c-accordion__title:before {
  transform: rotate(
		90deg
	);   
}

• This topic was modified 4 years ago by papijo.

The page I need help with: [log in to see the link]