How can I technically have two parts of a blog displaying separately?

Question

How to make my WordPress blog appear only in English or in French (two columns of a blog) for people searching for the information, with javascript or CSS? I have translated myself the content, so it's more to get the relevant content appear to the relevant audience. For now, the title is also bilingual. I have this website: www.emelinejonet.com (.com business theme/site). In this website, I have 3 tabs which are in fact 3 different blogs. On the blog about 'Ireland/France', the current post and all future posts will be with 2 columns: one in French and one in English. Someone told me that with either CSS or Javascript, I could have some coding allowing to have only one part of the blog shown depending on where the person is connected (Fr or Ie), like this: blog/article-title#fr and blog/article-title#en and have javascript change to CSS class to 'display:none'. Unfortunately, I have no real CSS/Javascript coding knowledge to do that myself (I know HTML, though).If I need to code, where should I add the coding text?

Answer 1

Based on the url, you can hide the div in question

if (url.indexOf('https://emelinejonet.com/category/irelandfrance/blog/article-title#fr') >= 0) {
  $('#div_Fr').hide();
} else {
  $('#div_Ie').show();
}

See this SO answer.

Also, if the URL (or the div names) in the code above are little different in your actual case, feel free to change them.

On your other question on where to add the CSS, if you are using wordpress.org, look for Additional CSS in the Appearance->Customize settings. That's where you can add it. You can read up on it here. For adding Javascript (like the one above), see here.

That said, it looks like you are not familiar with JS and CSS and so, you would need to spend some time to read up a bit on how JS and CSS work before you start using them in your blog.