Hi I am trying to make a website with CSS and want to know if it is possible to hide the text according to language. We use an asp website and languages are English and French. For simplicity of the person who will document the FAQ, I am obliged to do html(No template and DB). I want to do a CSS code that it check if the languageCode is "EN" or "FR" and put invisible tags where the language is not select. I can do Javascript to change CSS but because I use CSS to hide and show my question-anwser, I wanna know if I can do it with only CSS. Here a sample of what the template is, wher the info I want and where I want to apply css after.:
<div>
<div>
<div>
<div class="languageCode" id="fr" style="display: none; visibility: hidden;">fr</div>
</div>
</div>
</div>
<div class="MainContent">
<div>
<h1>FAQ</h1>
<label><input type="checkbox" id="language" />Français ?</label>
<ul class="collapse-list">
<li class="fr">
<label class="collapse-btn" for="question-1">
Titre FR1
</label>
<input class="collapse-open" type="radio" id="question-1" name="question" aria-hidden="true" hidden="hidden"/>
<div class="collapse-panel">
<div class="collapse-inner">
<p>
texte
</p>
</div>
</div>
</li>
<li class="en">
<label class="collapse-btn" for="question-2">
Title EN1
</label>
<input class="collapse-open" type="radio" id="question-2" name="question" aria-hidden="true" hidden="hidden"/>
<div class="collapse-panel">
<div class="collapse-inner">
<p>
text
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
Here a small part of the CSS
.collapse-open
{
display: none;
}
.collapse-panel
{
display: none;
margin-left: 10px;
}
.collapse-open:checked ~ .collapse-panel
{
display: block;
}
Here the part that I want to do but I can't say how to make it work
#fr.languageCode ~ .fr{
visibility: hidden;
display: none;
}
#fr.languageCode ~ .en{
visibility: visible;
}
#en.languageCode ~ .fr{
visibility: visible;
}
#en.languageCode ~ .en{
visibility: hidden;
display: none;
}
Like if the ID is #fr you display only french content and if ID is #en you display only english content. Note: I know the selector in my CSS doesn't work but I can't find what I should use or if it's possible to do what I want without javascript.
~
selector works on siblings, and your.languageCode
has no siblings. You'll want to add the language code somewhere as high up in the DOM as possible, perhapsdata-lang
on the body or something. Then you can do[data-lang="fr"] .en { display:none;}
and so on.