Place flag icons in first section of accordion

Hi,

I use a lot of accordions. The first section is the name of a therapist. Behind that name I want to place 2 or 3 flags to illustrate the language the therapist speaks.

Is there a way to do that?

Hey,

You can do that using a custom CSS code, but I need that you provide to us the website link in a secure note.

Hi there,

I have checked your site but I can’t seem to find where the accordion are but you can try doing these steps:

1. Add a class for the accordion that will signify the language. For example es will be the class for the spanish accordions.

2. Then add this code in the custom CSS:

.x-accordion .es .x-accordion-toggle:after {
    content: url(https://goo.gl/9MhTD5);
}

Please note that the es class in the CSS code above will target the accordions where you added the class in the first step and the url of the content is the path of the image that you will use for the flag. Please change it to the correct image and image size.

You can repeat the same steps for the other languages.

Hope this will get you started.

Hello,

I’m sorry but you misunderstood.
The only thing what I want is small icons behind the name (if possible?)

Hi there,

The previous suggestion given should get you started with what you are trying to achieve although you will have to add further customization.

This should be the result if you followed the suggestion given previously:

Adding the image after the accordion title is not a feature available out of the box and the implementation of it goes beyond the scope of our support although the previous steps should point you to the right direction.

Hi Thank you. This works. I uploaded flags to my media.
But what code should I use when I have 2 or 3 flags from different countries with a little space in between?

If I copy the code it will only show the last flag

Thanks in advance :wink:

Oh and can I add one more question. I have a therapist page with personal pictures and the name underneath. I really would like to place flags (more than 1) behind or under the names: http://prntscr.com/h3fehm

Hi there,

If you want to show two more flags, you can still follow the previous suggestion but instead of having one flag in the image you upload edit the image and place two flag beside each other then add a class name for the accordion item and update the CSS code. You can do the same to the therapist page.

Please note that this isn’t a feature currently offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

http://www.htmldog.com/guides/css/intermediate/classid/