Adding animation to the collapsible tabs

[technase]

I need help with changing the animation of the collapsible tabs when hovered over. I’d like the animation to match the style of the main menu in the header. Attaching screenshot for reference.

Link: https://testingstoresandthemes.myshopify.com/
storefront password: 12345

Any help is greatly appreciated

[Sweans]

Hi @technase ,

Please add the below css code to your theme stylesheet.

.accordion__title.inline-richtext.h4::after {
  content: "";
  height: 2px;
  width: 0;
  background-color: currentColor;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: width .45s;
  transition: width .45s;
}
.collapsible-content summary:hover .accordion__title {
  text-decoration: none;
}
.accordion summary:hover .accordion__title.inline-richtext.h4::after {
  width: 100%;
}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

[technase]

Thank you so much,
Is there a way to apply the animation only to the text, rather than the entire row?

[Sweans]

Hi @technase ,

Yes, it’s possible.

Just add the below CSS code too.

.accordion__title {
position: relative;
}

I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!

Regards,
Sweans

[technase]

perfect. Thank you.