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 ); }
The page I need help with: [log in to see the link]
- The topic ‘Ideas for dynamic opened/closed accordion marks’ is closed to new replies.