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 · Accepted solution]

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

[Sweans · Accepted solution]

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 · Accepted solution]

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.