How to display/hide content in a specific language?

In this article, you will learn how to display and/or hide content in a specific language.

If you would like to display certain content only in a specific language (for example, a button with a link), follow the steps below:

1. Create two different elements

First, create two different elements in your original website. One element will be for your original language, and the second one will be for the language you want to translate it into. These two elements will be present in the original version, but they will never display at the same time because of a CSS workaround (more information below).

2. Add a CSS selector for each element

You'll have to add a specific CSS selector (class or ID) for each element. For example, "link-en" for the icon you want to link to the English URL and "link-es" for the icon linked to the Spanish URL. If you don't know what a CSS selector is, you will find more information below.

3. Add some custom CSS

Then, go to your Weglot Dashboard > Select your project > Settings > Language Switcher and enter this code into the "Custom CSS" field:

html:not([lang="en"]) .link-en{   
   display: none!important; 
}
html:not([lang="es"]) .link-es {   
   display: none!important; 
}

Here, the :not() property is a negation pseudo-class that matches an element that is not represented.

For example, the condition html:not([lang="es"]) simply means "when the language is not Spanish". That means the code will instruct your website to hide that particular element when the language isn't Spanish.

Don't forget to replace the right languages and the right classes in the code above with your respective languages. Also, make sure the 'en' and 'es' abbreviations are the ones you're using.

To find the language code of your original language, you'll have to go to your source code. The code is displayed at the top:

Not sure how to access your source code? Find more information below.

Then, if your original language is English with an en-US short code, here is the final code you'll have to use:

html:not([lang="en-US"]) .link-en {
   display: none!important;
}
html:not([lang="es"]) .link-es {
   display: none!important;
}

Finally, if you'd like to apply the code for a third language, such as German, you can add just one line of custom CSS. It will look like this:

html:not([lang="en-US"]) .link-en {
  display: none!important;
}
html:not([lang="es"]) .link-es {
   display: none!important;
}
html:not([lang="de"]) .link-de {
  display: none!important;
}

4. Additional information

What is a CSS selector?

CSS selectors are used to find or select the elements you want to style, edit, or, in our case, hide. When you add content to your original website, you should be able to add a CSS selector to it.

For example, you can either:

- Find a dedicated field depending on which CMS, app, or plugin you are using to create the content:

Or

- Manually add the class or the ID by yourself directly in the HTML, so it looks like this:

After that, you'll have to use CSS rules to hide the element that should not be displayed according to the selected language.

How do I access my source code?

To access your source code, you can right-click anywhere on your website homepage and click on "View Page Source":