Accordion css - tab image background with hover

[Deesign]

Hi Team X,

I followed several different replies (including this one: https://theme.co/apex/forums/topic/using-an-image-as-accordion-title/) within the forum to attempt to create an accordion menu like the one on this page: https://4rsmokehouse.com/menu/

I made some progress but can’t seem to find the class to keep the background image visible when each section is open. The end goal is similar to the example, white background when closed, bg image when hovering or when open.

Can you help with one example in the right direction… or maybe this is more easily accomplished with another one of the CS elements?

[ruenel]

Hello @DeeDesign,

Thanks for writing in!

To resolve your issue, please have your code updated and use this code instead:

#tab-e1206-13:hover,
#tab-e1206-13.x-active {
    background-image: url(https://www.barbsfishandchips.com/wp-content/uploads/2019/07/fishandchips.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#tab-e1206-14:hover,
#tab-e1206-14.x-active {
    background-image: url(https://www.barbsfishandchips.com/wp-content/uploads/2019/07/clams.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.x-acc-header.x-active .x-acc-header-content {
    color: #fff !important;
}

We would love to know if this has worked for you. Thank you.

[Deesign]

AMAZING! That’s 5 Star Support!
Thank you for the speedy and successful response, we’re very grateful for your ongoing support.
The css works like a charm

[friech]

We are delighted to assist you with this.

Cheers!

[Deesign]

Would it be too far to ask for direction on how to add the parallax display that the example has to the X version?

https://4rsmokehouse.com/menu/
Even an intro on how to add some dimension to the X according bg tab image?

The other small edit is the very small rounded corners on the hover/active images - I can not see a radius in any of the code - where is this being generated? The end goal is for clean lines straight across

[friech]

Hi @DeeDesign,

That slide up effect is not quite possible with a custom CSS because we can not apply an opacity on the background. But we can have an effect that is close to that with the help of background-position and CSS transition property.

You can update the given CSS code to this:

#tab-e1206-13,
#tab-e1206-14 {
  background-position: 0 -100%;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-position 1.5s ease;
}

#tab-e1206-13 {background-image: url(https://www.barbsfishandchips.com/wp-content/uploads/2019/07/clams.jpg);}
#tab-e1206-14 {background-image: url(https://www.barbsfishandchips.com/wp-content/uploads/2019/07/fishandchips.jpg);}

#tab-e1206-13:hover,
#tab-e1206-13.x-active,
#tab-e1206-14:hover,
#tab-e1206-14.x-active {
  background-position: center;
}

.x-acc-header.x-active .x-acc-header-content {
    color: #fff !important;
}

Please be reminded that further customization from here falls outside of the scope of support that we can offer.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

With regards to the radius, you can set that under the “Items” tab of the Accordion element.

• 

Hope it helps,
Cheers!

[Deesign]

Amazing - thank you so much!

My Accordion element does not have an ITEMS option - I only see Content, Design, Customize and there’s not Item Border Radius that I can see… do I have to turn something on to see these extra options?

[friech]

Hi @DeeDesign,

Please enable the Advance Mode, under Settings > Preferences > Advance mode, save.

If you don’t see that option in there, please navigate to X > Settings > User Preferences > Advance Mode

Have a nice weekend,
Cheers!

[Deesign]

Wow - that changes everything! I’m so excited to dive in.

Thank you both very much

[friech]

You’re welcome, glad we could help.

Have a nice weekend,
Cheers!