Accordion image class

HI, I have used a class to put images on my accordion. But they only show up on the backend in cornerstone, Just the first one shows when I view the page.

Please can you help me?

Hello @sarahlouisewaterhouse,

Thanks for writing to us.

I checked your given page URL it seems that the menu is working fine, I went ahead and checked the accordion and it seems that all the accordion class is rendering on the front end. It might be the issue with the browser cache I would suggest you please clear your browser cache and then check it again.

Thanks

Hi, I cleared my browser cache and then checked on other browser platforms that hadn’t been used before, but can still only see the first photograph. Please can you send a screenshot of the page as you see it?
Thanks

Hello @sarahlouisewaterhouse,

You are experiencing the issue because you have inserted a broken CSS code:

You should have closed or added a closing curly brace. Actually those class or ID that you have added in each item is not necessary. You can use a code something like this into each of the accordion item:

$el.x-acc-item .x-acc-header {
     /* enter your styling here */
}

Best Regards.

Thanks. I tried the css

$el.x-acc-item .x-acc-header {
/* enter your styling here */
background: url(https://inwardeye.uk/wp-content/uploads/2022/11/cal2.jpg) !important;
background-repeat: no-repeat !important;
background-position: right !important;
background-size: 10% !important;
}

I see the image in Cornerstone but again nothing on the front. Even when I clear cache and change browsers

Hey @sarahlouisewaterhouse,

It is, again, because of the broken CSS you added in the first accordion item.

Hope this makes sense.

Thank you. It does.

Hi @sarahlouisewaterhouse,

Glad that we are able to help you.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.