CODEWITHSUNDEEP
jqueryhtmlshow-hide
mbh
mbh

Reputation: 5

Hide / Show multiple div by classes name

http://maximebichon.net/test.html

Here is the website. My problem is very simple. As you can see on the page, at the bottom of the menu it says "fr / en". Obviously, I would like to have some kind of french / english switch. Since it's a handcoded website, I tought that I could add some simple jquery which, which when the user click on fr or en, it hides a specific class and shows another one.

Here is the code I have used so far (found on stackoverflow) :

$(document).click(function() {
var toggleElements = $(".toggleMe");
$.each(toggleElements, function (key, value) {
   if (value.hasClass('hidden')) {
       value.removeClass('hidden');
       value.addClass('shown');
   } else {
       if (value.hasClass('shown')) {
           value.removeClass('shown');
           value.addClass('hidden');
       }
   }
});
});

Here is the css (pretty simple)

.hidden{
display: none;
}
.shown{
display: block;
}

Could you tell me what's wrong? And what should I add to link's href or class in order to switch the language ? Thanks a lot !

Upvotes: 0

Views: 442

Answers (3)

David Fregoli
David Fregoli

Reputation: 3407

it should be

var $toggleElements = $(".toggleMe");  
$toggleElements.click(function () {
    $toggleElements.toggleClass('hidden shown');
});

Upvotes: 0

Tomzan
Tomzan

Reputation: 2818

Assuming your logic is correct, try using $(value) instead of 'value'

$(document).click(function() {
var toggleElements = $(".toggleMe");
$.each(toggleElements, function (key, value) {
   if ($(value).hasClass('hidden')) {
       $(value).removeClass('hidden');
       $(value).addClass('shown');
   } else {
       if ($(value).hasClass('shown')) {
           $(value).removeClass('shown');
           $(value).addClass('hidden');
       }
   }
});
});

Upvotes: 0

palaѕн
palaѕн

Reputation: 73896

Why not just use the jQuery .toggleClass() method like:

$(document).click(function () {
    var $toggleElements = $(".toggleMe");
    $toggleElements.toggleClass('hidden shown');
});

DEMO #1

Upvotes: 2

Related Questions