Brad Collyer Brad Collyer - 1 month ago 7
HTML Question

Change the display style of multiple divs using jquery - language selector

I have an image as a background, of which part of that are 'buttons' (part of the picture) which are using the tag.

I have 2 div's for each language, 1 div above the buttons, 1 div below.

What I want to do is, have a language selector at the top of the page ('a href' links, not button's) where if one were to select 'Deutsch' it would change the english text div's to 'display:none;' and switch 'deutsch' to 'display:block;'.
In total there are 6 languages (12 divs in total).

<div id="text-top-en" class="english">
<p class="top">text above buttons</p>
</div>

<div id="text-bot-en" class="english">
<p class="bot">text below buttons</p>
</div>

<div id="text-top-de" class="deutsch" style="display: none;">
<p class="top">text above buttons in deutsch</p>
</div>

<div id="text-bot-de" class="deutsch" style="display: none;">
<p class="bot">text below buttons in deutsch</p>
</div>


I assume you get the idea so won't put the other language div's in here.

Any help would be very much apperciated.

EDIT
the links currently:

<a href="#">English</a>
<a href="#">Deutsch</a>
<a href="#">Français</a>
<a href="#">Italiano</a>
<a href="#">Español</a>
<a href="#">Nederlands</a>


EDIT - sorry If I don't reply until tomorrow. thanks for all your help!

Answer

Add more classes to the elements, so they are easier to target.
Then add the language to the anchors without the special characters.

In the click handler, it's then easy to get the language, hide all and then show the selected

$('.lang_selection').on('click', function() {
	$('.lang').hide();
    $('.' + $(this).data('lang')).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text-top-en" class="english lang">
<p class="top">text above buttons</p>
</div>

<div id="text-bot-en" class="english lang">
<p class="bot">text below buttons</p>
</div>

<div id="text-top-de" class="deutsch lang" style="display: none;">
<p class="top">text above buttons in deutsch</p>
</div>

<div id="text-bot-de" class="deutsch lang" style="display: none;">
<p class="bot">text below buttons in deutsch</p>
</div>

<div id="text-top-de" class="francais lang" style="display: none;">
<p class="top">text above buttons in french</p>
</div>

<div id="text-bot-de" class="francais lang" style="display: none;">
<p class="bot">text below buttons in french</p>
</div>

<a href="#" class="lang_selection" data-lang="english">English</a>
<a href="#" class="lang_selection" data-lang="deutsch">Deutsch</a>
<a href="#" class="lang_selection" data-lang="francais">Français</a>