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

In your original website, create two elements:

One for your original language
One for the translated language

Both elements will exist in your original version, but only one will display at a time thanks to a CSS rule.

2. Add a CSS selector for each element

Assign a unique CSS selector (class or ID) to each element. For example:

link-en for the English version
link-es for the Spanish version

Not sure what a CSS selector is? See the section “What is a CSS selector?” below.

3. Add some custom CSS

Once you have added the class/ID to the elements you wish to hide/display, 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; 
}

How it works:

:not() is a CSS pseudo-class meaning “when it is NOT this language.”
For example, html:not([lang="es"]) means “hide this element when the selected language is not Spanish.”

Don’t forget to:

Replace en and es with the correct language codes for your site
Replace .link-en and .link-es with your actual class or ID names

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

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 HTML elements (elements on your pages) that 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:

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

<a class="link-en">English button</a>
<a class="link-es">Botón en Español</a>

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":