Hi, I have accordions on my website with custom design.
Can I add css for hover-effect, so that title and background-color of the complete accordion changes color?
Thank You
Solved
SP Page Builder
accordion hover-effect
Accepted answer
Marked as the solution
Jürgen J. Fischer Asked this
perfect. Thank You.
3 more replies
Rashida Rahman Staff
1 year ago
· edited
Hi there!
Thanks for reaching out to us.
Where do you have that accordion, please? DO you want custom CSS for any accordion in general or for a particular one? If it's for a particular one, then you need to use that addon's unique ID. Hence I need to know where do you have that?
Just to be clear, do you want to change hover effect for the whole accordion addon or for single item/tab?
Moreover, you may check this out: https://www.joomshaper.com/forum/question/28406
Best regards,
Jürgen J. Fischer Asked this
Hi
You can see the accordion here:
https://hotel-gutsgasthof-stangl.de/feierlichkeiten
user: spp
password: spp-2025#JjF
Wissenswertes für Ihre Feier
A want a hover-effect for the whole accordion, means background changes color and title changes color
Thanx
Jürgen J. Fischer Asked this
Sorry, I have posted Passwort, this is not good
Please see hidden content
Rashida Rahman Staff
Hi,
Please use the following code in your custom CSS:
.sppb-addon-accordion .sppb-panel.sppb-panel-custom:hover{background:red;}
.sppb-addon-accordion .sppb-panel-custom .sppb-panel-heading .sppb-panel-title:hover{color:white;}Here is all about the custom code placement in Helix Ultimate Framework:
https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
Best regards,
Rashida Rahman Staff
You are always welcome:)
Log in to reply.